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

首先来看工程结构图:

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

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>

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索java
, jquery
, ajax
, servlet
, 下拉菜单
异步取值
ajax异步请求servlet、ajax异步加载servlet、servlet3.0 异步 ajax、ajax异步取值、ajax异步刷新下拉框,以便于您获取更多的相关知识。

时间: 2024-09-23 18:07:49

Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值_jquery的相关文章

jQuery点击弹出下拉菜单的小例子_jquery

复制代码 代码如下: <title>导航--点击弹出内容</title>    <style type="text/css">.navgation{margin:0;padding:0;list-style-type:none;position:relative;}.navgation li {float:left;}.navgation a{padding:3px 6px;background-color:orange;color:white;te

jquery实现平滑的二级下拉菜单效果_jquery

本文实例讲述了jquery实现平滑的二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款使用了jQuery实现的二级菜单特效,灰色风格,颜色自己不喜欢的就自己动动手吧,CSS代码经过了优化,水平高的自己拿出修改吧,这是一个在国外前端设计网站找到的导航菜单效果,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-soft-2level-menu-nav-codes/ 具体代码如下: <!DOCTYPE html>

jquery实现的淡入淡出下拉菜单效果_jquery

本文实例讲述了jquery实现的淡入淡出下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jQuery带有淡入淡出效果的下拉菜单,可作为一个下拉导航菜单的模板,移动鼠标到一级主菜单上看一看,在有包括二级子菜单的菜单项上悬停时,二级菜单渐变显示出来,兼容性也是很不错的,希望大家喜欢哈. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-style-codes/ 具体代码如下: <!DOCTYPE

jQuery点击弹出下拉菜单的小例子

这篇文章介绍了jQuery点击弹出下拉菜单的小例子,有需要的朋友可以参考一下   复制代码 代码如下: <title>导航--点击弹出内容</title>     <style type="text/css"> .navgation{margin:0;padding:0;list-style-type:none;position:relative;} .navgation li {float:left;} .navgation a{padding:3

jquery实现漂亮的二级下拉菜单代码_jquery

本文实例讲述了jquery实现漂亮的二级下拉菜单代码.分享给大家供大家参考.具体如下: 这里介绍一款基于jquery实现的网站下拉菜单,黑色风格,很漂亮,本菜单需要点击主菜单后的小三角符号才下拉出二级菜单,并不是有些菜单,是鼠标移上主菜单的时候就滑过,至于哪一种,就看个人的喜好了 先来看看运行效果: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-menu-codes/ 具体代码如下: <!DOCTYPE ht

jQuery简单实现两级下拉菜单效果代码_jquery

本文实例讲述了jQuery简单实现两级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款两级下拉菜单,jquery插件版,在IE6/IE7/IE8下运行良好,在本示例中,菜单仅显示了四组,不过原理是一样的,菜单较长的话直接复制其中一组就行了,直到满足你的应用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-2l-slideout-menu-codes/ 具体代码如下: <!DOCTYPE html PUBL

java之swing下拉菜单实现方法_java

本文实例讲述了java之swing下拉菜单实现方法.分享给大家供大家参考.具体如下: import java.awt.*; import javax.swing.*; import java.awt.event.*; public class test extends JApplet implements ItemListener{ JLabel jtf; ImageIcon a1, a2, a3; public void init(){ Container contentPane = getC

AJAX省市区三级联动下拉菜单(java版)_java

此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){ $.get("getProvince.do", function(result){ $("#showp").html(result); }); }) var xmlhttp; function mysend(str){ $(docum

java省市级联下拉菜单实例代码_java

本文实例为大家分享了java省市级联的具体代码,供大家参考,具体内容如下 1.LoadAreaServlet.java package com.scce.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; im