json 数据转换格式
语法：{属性：属性值，属性：属性值，属性：属性值}
特点：01.对象表示方式：键值对
02.每个属性逗号隔开
03.大括号 { 对象 }
04.中括号 [ 数组 ]
<%@ 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"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> 01.json格式的对象： <div id="objectDiv"></div> 02.json格式的数组： <select id="arrayDiv"></select> <ul id="ulArray"></ul> 03.json格式的对象数组： <div id="stuArr"></div> <script type="text/javascript" src="js/jQuery1.11.1.js"></script> <script type="text/javascript"> $(function(){ //01.定义一个json格式的对象 var student={"id":1,"name":"cxm","password":"admin"}; //获取id="objectDiv" $("#objectDiv").append("id:"+student.id+"<br/>") .append("name:"+student.name+"<br/>") .append("password:"+student.password+"<br/>"); //02.定义一个json格式的数组 var array=["小黑1","笑好诶2","小白"]; //转换成jquery对象,方便后续操作 var $arr=$(array); //获取下拉框 并且赋值 var $select =$("#arrayDiv"); $arr.each(function(i){ //循环给下拉框 增加option节点 $select.append("<option value='"+(i+1)+"'>"+this+"</option>"); }); //获取ul var $ul=$("#ulArray"); $arr.each(function(i){ $ul.append("<li>"+this+"</li>"); }); //02.定义一个json格式的数组 var array=["小黑1","小黑2","小黑3"]; var $arr=$(array); //转换成jquery对象,方便后续操作 //获取下拉框 并且赋值 var $select =$("#arrayDiv"); $arr.each(function(i){ //循环给下拉框 增加option节点 $select.append("<option value='"+(i+1)+"'>"+this+"</option>"); }); //获取ul var $ul =$("#ulArray"); $arr.each(function(i){ //循环给下拉框 增加li节点 $ul.append("<li>"+this+"</li>"); }); //03.定义一个json格式的对象数组 var stuArray=[ {"id":1,"name":"kitty","password":123}, {"id":2,"name":"nini","password":456}, {"id":3,"name":"lala","password":789} ]; //创建一个table表格 var $table=$("<table border='1'></table>") .append("<tr><td>编号</td><td>姓名</td><td>密码</td></tr>"); $(stuArray).each(function(){ //遍历对象数组 $table.append("<tr><td>"+this.id+"</td><td>" +this.name+"</td><td>"+this.password+"</td></tr>"); }); //把表格放进div中 $("#stuArr").append($table); }); </script> </body> </html>
实现Ajax与json的交互
package bean; public class User { private String name; private int password; public User() { } public User(String name, int password) { super(); this.name = name; this.password = password; } @Override public String toString() { return "User [name=" + name + ", password=" + password + "]"; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getPassword() { return password; } public void setPassword(int password) { this.password = password; } }
package servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; 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 com.google.gson.Gson; import bean.User; @WebServlet("/StudentServlet") public class StudentServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req,resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 加上响应头信息 resp.setHeader("Content-type", "text/html;charset=utf-8"); // 模拟从数据库中获取数据 User user1=new User("kitty",123); User user2=new User("is",123); User user3=new User("very",123); User user4=new User("bueatiful",123); User user5=new User("girl",123); List<User>list=new ArrayList<User>(); list.add(user1); list.add(user2); list.add(user3); list.add(user4); list.add(user5); // 因为前台的dataType是json 我们需要把集合转换成json格式 之后再返回 Gson gson=new Gson(); String json = gson.toJson(list); System.out.println(json); PrintWriter pw=resp.getWriter(); pw.print(json); pw.close(); } }
<%@ 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 'AjaxJson.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"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <div></div> <script type="text/javascript" src="js/jQuery1.11.1.js"></script> <script type="text/javascript"> $(function(){ $.ajax({ url:"StudentServlet", type:"GET", dataType:"json", success:function(data){//data就是后台返回的json数据 $("div").append("<span>姓名</span> <span>密码</span><br/>"); //遍历data $(data).each(function(i){ $("div").append("<span>"+data[i].name+"</span> <span>"+data[i].password+"</span><br/>"); }); } }); }); </script> </body> </html>