1.遍历ajax返回的json:
第一种:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% 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 'login.jsp' starting page</title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function() { $("#do_login_button").click(function() { $.ajax({ type : "POST",
data :{
username: $("#username").val(),
password: $("#password").val()
},
url : "login/findUser", dataType : "json", success : function(data) { var dataObj = data, //返回的result为json格式的数据 con = ""; $.each(dataObj, function(index, item){ con += "<li>姓名:"+item.username+"</li>"; con += "<li>性别:"+item.password+"</li>"; con += "<li>现居地:"+item.id+"</li>"; }); console.log(con); //可以在控制台打印一下看看,这是拼起来的标签和数据 $("#con").html(con); //把内容入到这个div中即完成 } }); }); }); </script> </head> <body> <form id="forms" method="post"> Username:<input type="text" id="username" name="username" /> <br /> Passowrd:<input type="password" id="password" name="password" /> <br /> <input id="do_login_button" type="button" value="Login" /> </form> <div id="box"> <a class="btn" href="javascript:;">点击</a> <ul id="con"></ul> </div> </body> </html>
2.Ajax: