Jquery实现ajax:
$.ajax({ type //数据的提交方式:get和post url //数据的提交路径 async //是否支持异步刷新,默认是true data //需要提交的数据 datatype //服务器返回数据的类型,例如xml,String,Json等 success //请求成功后的回调函数 error //请求失败后的回调函数}); } )
json对服务器返回结果是集合的处理
<script> $(function(){ $("#btn").click(function(){ 单击按钮时 $.ajax({ type:"get", 请求方式 url:"ShowServlet", 跳转路径 async:true, 异步请求
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>注:var json = eval('('+data+')'); 将JSON的字符串解析成JSON数据格式