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

最新推荐文章于 2021-08-05 18:45:08 发布

woalen

最新推荐文章于 2021-08-05 18:45:08 发布

阅读量888

点赞数

本文链接：https://blog.csdn.net/u014785888/article/details/40452683

版权

JQuery 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

本人菜鸟，一直苦恼于如何用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>

woalen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuey ajax请求servlet实现异步刷新的实例

package com.fengqi.action;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletConfig;import javax.ser
复制链接

扫一扫

专栏目录