Ajax之json返回结果是集合的处理

xiaoxiao2022-07-13 174

Jquery实现ajax：

$.ajax({ type //数据的提交方式：get和post url //数据的提交路径 async //是否支持异步刷新，默认是true data //需要提交的数据 datatype //服务器返回数据的类型，例如xml,String,Json等 success //请求成功后的回调函数 error //请求失败后的回调函数}); } )

json对服务器返回结果是集合的处理

success:function(data){成功处理 var json = eval('('+data+')'); 将JSON的字符串解析成JSON数据格式 var table="<table>"; for(var i in json){ table+="<tr><td>"+json[0].id+"</td><td>"+json[i].name+"</td><td>"+json[i].birthday+"</td><td>"+json[i].regTime+"</td></tr>"; $("#show").html(table);显示在页面 } table+="</table>"; },

代码实现：

userList.jsp

<%-- Description:ajax 返回集合 User: jiatp Date: 2019/5/22 Time: 21:45 --%> <%@ 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="js/jquery.js"></script> <script type="text/javascript"> //初始化 $(function () { $("#btn").click(function () { $.ajax({ type:"post", url:"showAllUserList", data:{}, datatype:"json", success:function (data) { //转换为javascript对象 var user = eval('('+data+')'); var str = "<table>"; var strcontent = ""; for(var i=0;i<user.length;i++){ strcontent+="<tr><td>"+user[i].id+"</td><td>"+user[i].name+"</td><td>"+user[i].address+"</td></tr>" } str+=strcontent+"</table>"; $("#content").html(str); },error:function () { alert("error!"); } }) }) }) </script> <body> <input type="button" id="btn" value="显示集合"> <div id="content"></div> </body> </html>

showAllUserList.java

package com.chinasofti.servlet; import com.chinasofti.entity.User; import net.sf.json.JSONArray; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; /** * Description:ajax返回一个集合对象 * USER:jiatp * Date:2019/5/22 22:16 * */ @WebServlet("/showAllUserList") public class showAllUserList extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); request.setCharacterEncoding("utf-8"); List<User> userList = new ArrayList(); User user1 = new User(); user1.setName("张三"); user1.setAddress("北京"); user1.setId(1); User user2 = new User(); user2.setName("李四"); user2.setAddress("上海"); user2.setId(2); //添加到集合 userList.add(user1); userList.add(user2); PrintWriter out = response.getWriter(); //将user对象转换成json格式 JSONArray json = JSONArray.fromObject(userList); System.out.println(json); out.print(json); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } }

注：var json = eval('('+data+')'); 将JSON的字符串解析成JSON数据格式

最新回复(0)