(一)json 格式 (两种)
对象格式:{"key1":obj,"key2":obj,"key3":obj...} 数组 / 集合格式:[obj,obj,obj...]
(二)json 格式书写练习
(1)
北京
- (2)
- <script language="JavaScript">
- /**
- * 案例二
- * [{key:value,key:value},{key:value,key:value}]
- *
- */
- // 数组, 集合形式
- var persons = [
- {"firstname":"li","lastname":"si","age":"34"},
- {"firstname":"wang","lastname":"wu","age":"24"}
- ];
- // 取出 firstname=li
- alert(persons[1].firstname);
- // 取 34
- alert(persons[0].age);
- </script>
- (3)
- <script language="JavaScript">
- /**
- * 案例三
- * {
- * "param":[{key:value,key:value},{key:value,key:value}]
- * }
- *
- *
- */
- // 对象格式, 对象中 value 为一个数组, 数组中又有多个对象, 表现为数组格式与对象格式嵌套
- var json = {
- "baobao":[
- {"name":"小双","age":"28"},
- {"name":"建宁","age":"18"},
- {"name":"阿珂","age":"24"}
- ]
- // 取 name = 建宁
- alert(json.baobao[1].name);// 对象. 属性. 属性
- // 取 age=24
- alert(json.baobao[2].age);
- }
- </script>
- (4)
- <script language="JavaScript">
- /**
- * 案例四
- * {
- * "param1":[{key:value,key:value},{key:value,key:value}],
- * "param2":[{key:value,key:value},{key:value,key:value}],
- * "param3":[{key:value,key:value},{key:value,key:value}]
- * }
- *
- *
- */
- var json = {
- "param1":[
- {key1:value1,key2:value2}
- {key3:value3,key4:value4}
- ],
- "param1":[
- {key5:value5,key6:value6}
- {key7:value7,key8:value8}
- ],
- };
- // 取 value7
- alert(json.param1[1].key7);
- </script>
- (5)
- <script language="JavaScript">
- /**
- * 案例五
- * {
- * "param1":"value1",
- * "param2":{},
- * "param3":[{key:value,key:value},{key:value,key:value}]
- * }
- *
- *
- */
- var json = {
- "param1":"value1",
- "param2":{"firstname":"sun","lastname":"myth"},
- "param3":[
- {key1:value1,key2:value2},
- {key3:value3,key4:value4}
- ]
- };
- // 對象導航
- // 取 myth
- alert(json.param2.lastname);
- // 取 value3
- alert(json.param3[1].key3);
- </script>
(三)ajax 前后端交互
(1) 目录结构
- (1)jquery_ajax.html
- <script type="text/javascript" src="jquery-1.11.3.min.js"></script><script type="text/javascript"> /*// 验证 jQuery 引入是否发生错误, 用弹出框检验 $(function(){ alert(); });*/ function fn1(){ /* jQuery.get(url, [data], [callback](回调函数), [type]) jQuery=$ [data],[callback],[type] 都是可选的 *///get 异步访问 //alert(); $.get( "/AjaxDemo/ajaxServlet2",//url 地址 {"name":"zhangsan","age":"24"},// 请求参数 function(data){// 执行成功后的回调函数, 在此处将其写成匿名函数 //{\"name\":\"tom\",\"age\":\"26\"}, 既然字符串在此处被解析为 json 对象 // 那么可以采用对象导航的方式取值, data 即为该对象 //alert(data.name); alert(data);// 此处的 data 表示服务器端返回的数据 },// 若后面不写回调函数, 此处没有, 号 //"text"// 返回内容格式为 text "json" // 返回内容 data 必须为 json 格式的字符串, 否则报错 (比如返回字符串 "success.."") // 在回调函数中会将服务器返回的 json 字符串解析为 json 对象 ); }// 若果用 get 提交方式传输中文数据, 会出现乱码, 可以进行先编码再解码的方法解决 //{"name":"张三","age":"24"}, function fn2(){ $.post( "/AjaxDemo/ajaxServlet2", {"name":"zhangsan","age":"24"}, function(data){ alert(data.age); }, "json" ); } //jQuery 方法进行 post 提交不用解决中文乱码问题, 在 jQuery 内部已经进行了乱码处理 // 既不用书写 request.setCharacterEncoding("UTF-8"); </script>
- (2)AjaxServlet.java
- package com.shu.hj;
- import java.io.IOException;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- /**
- * Servlet implementation class AjaxServlet2
- */
- public class AjaxServlet2 extends HttpServlet {
- private static final long serialVersionUID = 1L;
- /**
- * @see HttpServlet#HttpServlet()
- */
- /**
- * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
- */
- protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- // TODO Auto-generated method stub
- //response.getWriter().append("Served at:").append(request.getContextPath());
- String name = request.getParameter("name");
- String age = request.getParameter("age");
- System.out.println("name:"+name+"age:"+age);
- // 当前端页面数据提交过来后, 服务器端需要返回信息
- response.getWriter().write("success...");
- // 此时返回一个字符串 "success...", 考虑一下前端如何接收
- // 在回调函数中接收
- /*
- 如果返回格式要求为 json, 则服务器端 Java 代码只能返回一个 json 格式的字符串
- {"name":"tom","age":"26"}
- * */
- //System.out.println("{"name":"tom","age":"26"}");
- // 以上直接将 json 格式字符串放入其中会报错, 会发现花括号里外都是双引号
- // 如果将内部改为单引号 System.out.println("{'name':'tom','age':'26'}");
- // 此时同样会报错,{'test': 1} (使用了单引号而不是双引号) 会被识别为畸形 json 格式
- System.out.println("{\"name\":\"tom\",\"age\":\"26\"}");// 使用转义字符
- }
- /**
- * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
- */
- protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- // TODO Auto-generated method stub
- doGet(request, response);
- }
- }
- (3)web.xml
- AjaxServlet2
- AjaxServlet2
- com.shu.hj.AjaxServlet2
- AjaxServlet2
- /ajaxServlet2
(2) 结果
在浏览器中输入页面地址
来源: https://www.2cto.com/kf/201808/766307.html