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 原型学习总结
Oct 29 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
python实现udp传输图片功能
2020/03/20 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
python适合做数据挖掘吗
2020/06/16 Python
草莓网官网:StrawberryNET
2019/08/21 全球购物
行政总监岗位职责
2013/12/05 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
监护人证明
2015/06/19 职场文书
九年级历史教学反思
2016/02/19 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技