JQuey ajax请求servlet实现异步刷新的实例

来源：互联网发布：局域网软件编辑：程序博客网时间：2024/05/29 16:29

本人菜鸟，一直苦恼于如何用Query ajax实现异步刷新，于是狠下功夫研究了一阵，终于弄懂了一些，于是写下这篇文章以备忘。

本样例都是以json格式传送数据的

第一步：将项目所需要使用的jar包引入，在这个样例中采用两种方式将java Util中的list转换成支json的格式，第一种是用json-lib.jar这个jar包来转换，第二种是采用goole的gson-2.1.jar来转换，大家可以根据需要导入相应的jar包，在这里为了做测试将两种jar包都导入了。

第二步：编写servlet的类，为了简单起见，这里就不用到数据库，简单构建一个List集合，将其转换成JSONArray格式，然后输出到页面

<pre name="code" class="java">package com.fengqi.action;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;import net.sf.json.JSONArray;public class TestServlet extends HttpServlet {/** * Constructor of the object. */public TestServlet() {super();}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/html");String strValue = request.getParameter("strValue");PrintWriter out = response.getWriter();//集合一List<Object> list = new ArrayList<Object>();list.add("ZHANGSAN_nan");list.add("LISI_nan");list.add("WANGWU_nan");//集合二List<Object> list2 = new ArrayList<Object>();list2.add("LIUSHUI_nv");list2.add("ZHANGSANFENG_nv");System.out.println(strValue);//第一种方法：采用json-lib.jar中的方法将ArrayList转换成JSONArray的对象数组JSONArray jsonArray = JSONArray.fromObject(list);//第二种方法：采用gson-lib中的方法将ArrayList转换成JSONArray的对象数组Gson gson = new Gson();String output = gson.toJson(list);//判断输出的该输出什么样的语句if(strValue.equals("nan")){out.println(output);}else{out.println(gson.toJson(list2));}}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/html");PrintWriter out = response.getWriter();doGet(request, response);}}

第三步：配置web.xml。

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">  <display-name></display-name>  <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>TestServlet</servlet-name>    <servlet-class>com.fengqi.action.TestServlet</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>TestServlet</servlet-name>    <url-pattern>/servlet/TestServlet</url-pattern>  </servlet-mapping>  <welcome-file-list>    <welcome-file>index.jsp</welcome-file>  </welcome-file-list>  </web-app>

第四步：编写jsp页面，在该jsp界面做了三种，第一种情况是直接请求kk.txt文件，直接拿到kk.txt文件中的内容；第二种是请求servlet,响应普通字符串，无需通过任何的遍历；第三种是请求servlet,响应支持Json的List，请求得到的数据需要将数据经过.each方法进行遍历得到数组中的值。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script src="js/jquery-2.1.1.min.js"></script><script type="text/javascript">$(document).ready(function() {        $("#hh1").click(function() {        //debugger;            $.ajax({                //url: "servlet/TestAction",                url: "json/testJson.txt",                //data: {strValue:$("#v1").val()},                type: "POST",                datatype: 'json',                success: function(data,status){                //data = mini.encode(data); //mimiUI的方式实现json转换成String，json --> string                  //$.parseJSON(data);//JQuery的方式实现字符串转换成json格式；                //data = mini.decode(data);//mimiUI的方式实现字符串转换成json各式  string-->json                data = $.parseJSON(data);                $("#v2").children("option").remove();                $("#v2").append("<option>请选择</option>");                    for(var i=0;i<data.name.length;i++){                    $("#v2").append("<option>"+data.name[i]+"</option>");                    }                }            });        });        $("#hh3").click(function() {            $.ajax({                url: "servlet/TestServlet",                data: {strValue:$("#v1").val()},                cache: false,                type: "POST",                datatype: 'json',                success: function(data,status){        data = $.parseJSON(data);                alert(data);                $("#v2").children("option").remove();                $("#v2").append("<option>请选择</option>");                $(data).each(function(i){                      $("#v2").append("<option>"+data[i]+"</option>");                })                }            });        });    });</script>  </head>    <body>    <br><h2 align="center">ajax请求servlet的测试样例</h2><br>    <button id="hh1">直接请求txt文件</button>    <button id="hh3">请求servlet,响应支持Json的List</button><br><br>    请选择的传值：    <select id="v1">    <option value="nan">男</option>    <option value="nv">女</option>    </select><br><br>    <select id="v2">    <option>option数据</option>    </select>  </body></html>

0 0