使用原生ajax异步返回json数据
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <script type="text/javascript" src="./ajax.js"></script> <body> <form name="myForm"> <input type="button" value="现在时间" onclick="ajaxFunction();"> </form> </body> </html>
function getxmlHttp(){ var xmlHttp; try { // Firefox,Opera 8.0+,Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX!"); return false; } } } return xmlHttp; } function ajaxFunction() { var xmlHttp = getxmlHttp(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { if(xmlHttp.status == 200 || xmlHttp == 304){ var data = xmlHttp.responseText; var dataObj = eval("("+data+")"); for(var i = 0;i<dataObj.length;i++){ alert(dataObj[i].name); } } } }; xmlHttp.open("post","Deal?a=3&&time="+new Date().toString(),true); //post方法独有,请求向服务器发送数据,数据已经符合url编码 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send("b=5"); }
Deal.java
package cn; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.Date; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import net.sf.json.JsonConfig; public class Deal extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { } protected void doPost(HttpServletRequest request,IOException { // TODO Auto-generated method stub response.setContentType("text/html;charset=UTF-8"); PrintWriter writer = response.getWriter(); List<Province> list = new ArrayList<Province>(); Province p1 = new Province(1,"广东省"); Province p2 = new Province(2,"辽宁省"); Province p3 = new Province(3,"山东省"); list.add(p1); list.add(p2); list.add(p3); JsonConfig config = new JsonConfig(); config.setExcludes(new String[]{"id"}); //不用转化的字段 JSONArray json = JSONArray.fromObject(list,config); System.out.println(json.toString()); writer.write(json.toString()); } }
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>Deal</servlet-name> <servlet-class>cn.Deal</servlet-class> </servlet> <servlet-mapping> <servlet-name>Deal</servlet-name> <url-pattern>/Deal</url-pattern> </servlet-mapping> </web-app>
实体bean
Province.java
package cn; public class Province { private int id; private String name; public Province() { } public Province(int id,String name) { this.id = id; this.name = name; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
本文直接在servlet中生成数据,并且通过json包中的函数转化为json格式,异步传输到前台。
注:需要引入json的包
原文链接:https://www.f2er.com/ajax/164365.html