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