Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值


Posted in Javascript onMarch 23, 2016

首先来看工程结构图:

Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值

项目所需要的包,如下所示:

Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值

JSP代码:

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://"
      + request.getServerName() + ":" + request.getServerPort()
      + path + "/";
      System.out.println("basePath="+basePath);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JsonCase</title>
<script type="text/javascript" src="<%=basePath %>js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  $(function($) {
    $("#record").append("当前测试页面完成加载。<br/>");
  });
  function getFirstFloorValue(element) {
    $("#record").append("<br/>获取到信息:您将要取得第一级选项信息……");
    $("#record").append("<br/>正在使用ajax为您获取数据,您可以继续停留在页面并进行其他操作。");
    $.ajax({
      url : 'ValueGetController',
      type : 'post',
      data : 'action=GetFirstFloorValue',
      datatype : 'json',
      success : function(data) {
        $("#record").append("<br/>操作成功,正在为您准备数据……");
        $(element).empty();
        $("#record").append("<br/>清除原始数据成功!");
        var ops = $.parseJSON(data);
        $("#record").append("<br/>即时数据准备成功!");
        for ( var i = 0; i < ops.length; i++)
          $(element).append(
              "<option value=\"" + ops[i] + "\">" + ops[i]
                  + "</option>");
        $("#record").append("<br/>更新列表成功!<br/>");
      }
    });
    
    
  }
</script>
</head>

<body>
  <div>
    
    <select id="select1" onfocus=getFirstFloorValue(this)>
      <option value="1">点击取值</option>
    </select>
  </div>
  <dir>
    <h3>记录信息:</h3>
    <span id="record"></span>
  </dir>
</body>
</html>

JAVA servlet代码:

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;

public class ValueGetController extends HttpServlet {
  
  private static final long serialVersionUID = -1293610555518403602L;


  /**
   * Constructor of the object.
   */
  public ValueGetController() {
    super();
  }

  /**
   * Destruction of the servlet. <br>
   */
  public void destroy() {
    super.destroy(); // Just puts "destroy" string in log
    // Put your code here
  }

  /**
   * The doGet method of the servlet. <br>
   *
   * This method is called when a form has its tag value method equals to get.
   * 
   * @param request the request send by the client to the server
   * @param response the response send by the server to the client
   * @throws ServletException if an error occurred
   * @throws IOException if an error occurred
   */
  public void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    doPost(request, response);
    

  }

  /**
   * The doPost method of the servlet. <br>
   *
   * This method is called when a form has its tag value method equals to post.
   * 
   * @param request the request send by the client to the server
   * @param response the response send by the server to the client
   * @throws ServletException if an error occurred
   * @throws IOException if an error occurred
   */
  public void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    request.setCharacterEncoding("GBK");
     response.setContentType("text/html;charset=gbk");
     PrintWriter out = response.getWriter();
     String action = request.getParameter("action");
     System.out.println("action"+action);
     if (action.equals("GetFirstFloorValue")) {
             String[] str = GetFirstFloorValue();
             JSONArray ja = JSONArray.fromObject(str);
             String json = ja.toString();
              out.print(json);
             System.out.println(json);
             out.flush();
              out.close();
              return;
           }
            out.flush();
            out.close();
  }

  private String[] GetFirstFloorValue() {
     String[] str = new String[4];
         str[0] = "test1";
         str[1] = "test2";
         str[2] = "test3";
         str[3] = "test4";
         return str;

  }

  

}

关于servlet的web.xml配置:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
  xmlns="http://java.sun.com/xml/ns/javaee" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
  http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 <servlet>
  <description>This is the description of my J2EE component</description>
  <display-name>This is the display name of my J2EE component</display-name>
  <servlet-name>ValueGetController</servlet-name>
  <servlet-class>servlet.ValueGetController</servlet-class>
 </servlet>

 <servlet-mapping>
  <servlet-name>ValueGetController</servlet-name>
  <url-pattern>/ValueGetController</url-pattern>
 </servlet-mapping>
 
 
  
 <welcome-file-list>
  <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>
</web-app>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript中的类继承
Nov 25 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
JavaScript弹出对话框的三种方式
Mar 23 #Javascript
JS随机洗牌算法之数组随机排序
Mar 23 #Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 #Javascript
JavaScript学习笔记之数组去重
Mar 23 #Javascript
JavaScript学习笔记之数组随机排序
Mar 23 #Javascript
JavaScript学习笔记之数组求和方法
Mar 23 #Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 #Javascript
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
php实现通过ftp上传文件
2015/06/19 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
如何通过JS实现转码与解码
2020/02/21 Javascript
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
用pycharm开发django项目示例代码
2019/06/13 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
10个顶级Python实用库推荐
2021/03/04 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
学子宴答谢词
2014/01/25 职场文书
个人安全生产承诺书
2014/05/22 职场文书
分公司经理任命书
2014/06/05 职场文书
岗位说明书标准范本
2014/07/30 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL