1.JSON
1.1 什么是 JSON?
1.2 在 JavaScript 中的使用
1.2.1 JSON的定义
// json的定义 var jsonObj = { "key1":12, "key2":"abc", "key3":true, "key4":[11,"arr",false], "key5":{ "key5_1" : 551, "key5_2" : "key5_2_value" }, "key6":[{ "key6_1_1":6611, "key6_1_2":"key6_1_2_value" },{ "key6_2_1":6621, "key6_2_2":"key6_2_2_value" }] };
1.2.2 JSON 的访问
alert(typeof(jsonObj)); // object json就是一个对象 alert(jsonObj.key1); //12 for(var i = 0; i < jsonObj.key4.length; i++) { alert(jsonObj.key4[i]); } alert(jsonObj.key5.key5_1); //551 // 取出来每一个元素都是json对象 var jsonItem = jsonObj.key6[0]; alert( jsonItem.key6_1_1 ); //6611
1.2.3 常用方法
// 把JSON对象转换成为JSON字符串 var jsonObjString = JSON.stringify(jsonObj); // 特别像Java中对象的toString alert(jsonObjString) // 把JSON字符串转换成为JSON对象 var jsonObj2 = JSON.parse(jsonObjString); alert(jsonObj2) // [object Object] alert(jsonObj2.key1); // 12
1.3 JSON在 Java 中的使用
1.3.1 javaBean 和 JSON 的互转
public void test1(){ Person person = new Person(1,"psj"); // 创建Gson对象实例 Gson gson = new Gson(); // toJson方法可以把java对象转换成为json字符串 String personJsonString = gson.toJson(person); System.out.println(personJsonString); // fromJson把json字符串转换回Java对象 // 第一个参数是json字符串 // 第二个参数是转换回去的Java对象类型 Person person1 = gson.fromJson(personJsonString, Person.class); System.out.println(person1); } // 输出: {"id":1,"name":"psj"} Person{id=1, name='psj'}
1.3.2 List 和 JSON 的互转
public void test2() { List<Person> personList = new ArrayList<>(); personList.add(new Person(1, "psj")); personList.add(new Person(2, "psw")); Gson gson = new Gson(); // 把List转换为json字符串 String personListJsonString = gson.toJson(personList); System.out.println(personListJsonString); List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType()); System.out.println(list); Person person = list.get(0); System.out.println(person); } // PersonListType类 public class PersonListType extends TypeToken<ArrayList<Person>> { } // 输出: [{"id":1,"name":"psj"},{"id":2,"name":"psw"}] [Person{id=1, name='psj'}, Person{id=2, name='psw'}] Person{id=1, name='psj'}
1.3.3 map 和 JSON的互转
public void test3(){ Map<Integer,Person> personMap = new HashMap<>(); personMap.put(1, new Person(1, "psj")); personMap.put(2, new Person(2, "psw")); Gson gson = new Gson(); // 把 map 集合转换成为 json字符串 String personMapJsonString = gson.toJson(personMap); System.out.println(personMapJsonString); // Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new PersonMapType().getType()); Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType()); // 直接使用匿名内部类即可 System.out.println(personMap2); Person p = personMap2.get(1); System.out.println(p); } // PersonMapType类 public class PersonMapType extends TypeToken<HashMap<Integer, Person>> { } // 输出: {"1":{"id":1,"name":"psj"},"2":{"id":2,"name":"psw"}} {1=Person{id=1, name='psj'}, 2=Person{id=2, name='psw'}} Person{id=1, name='psj'}
2.AJAX请求
2.1 什么是 AJAX 请求
即
Asynchronous Javascript And XML
(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术
- 局部更新:
// BaseServlet类 public abstract class BaseServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 解决post请求中文乱码问题 // 一定要在获取请求参数之前调用才有效 req.setCharacterEncoding("UTF-8"); // 解决响应中文乱码 resp.setContentType("text/html; charset=UTF-8"); String action = req.getParameter("action"); try { // 获取action业务鉴别字符串,获取相应的业务 方法反射对象 Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class); // 调用目标业务方法 method.invoke(this, req, resp); } catch (Exception e) { e.printStackTrace(); throw new RuntimeException(e); // 把异常抛给Filter过滤器 } } } // AjaxServlet类 public class AjaxServlet extends BaseServlet { protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("Ajax请求过来了"); Person person = new Person(1, "psj"); // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); } }
// 在这里使用javaScript语言发起Ajax请求,访问服务器AjaxServlet中javaScriptAjax function ajaxRequest() { // 1、我们首先要创建XMLHttpRequest var xmlhttprequest = new XMLHttpRequest(); // 2、调用open方法设置请求参数 // true表示异步处理请求 xmlhttprequest.open("GET","http://localhost:8080/JSON_AJAX/ajaxServlet?action=javaScriptAjax",true); // 4、在send方法前(正常逻辑下面代码应该放置在send方法后)绑定onreadystatechange事件,处理请求完成后的操作 // 每次readyState改变就会触发onreadystatechange事件 xmlhttprequest.onreadystatechange = function(){ // 4表示请求已经完成且响应已就绪 if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) { alert("收到服务器返回的数据:" + xmlhttprequest.responseText); var jsonObj = JSON.parse(xmlhttprequest.responseText); // 把响应的数据显示在页面上 document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + " , 姓名:" + jsonObj.name; } } // 3、调用send方法发送请求 xmlhttprequest.send();
// 如果点击链接非Ajax后,地址栏会变为http://localhost:8080/JSON_AJAX/ajaxServlet?action=javaScriptAjax // 并且原本页面变为新页面只显示{"id":1,"name":"psj"} // 如果点击ajax request按钮会在原始页面上显示:编号:1 , 姓名:psj // 即页面中的其他位置元素并没有变化,只是在设置的div显示了内容,并且地址栏还是 // http://localhost:8080/JSON_AJAX/ajax.html <a href="http://localhost:8080/JSON_AJAX/ajaxServlet?action=javaScriptAjax">非Ajax</a> <button onclick="ajaxRequest()">ajax request</button> <div id="div01"></div>
- 异步:
protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("Ajax请求过来了"); Person person = new Person(1, "psj"); // 让服务器休眠3S try { Thread.sleep(3000); } catch (InterruptedException e) { e.printStackTrace(); } // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); }
function ajaxRequest() { var xmlhttprequest = new XMLHttpRequest(); // 设置为同步处理请求 xmlhttprequest.open("GET","http://localhost:8080/JSON_AJAX/ajaxServlet?action=javaScriptAjax",false); xmlhttprequest.onreadystatechange = function(){ if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) { alert("收到服务器返回的数据:" + xmlhttprequest.responseText); var jsonObj = JSON.parse(xmlhttprequest.responseText); document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + " , 姓名:" + jsonObj.name; } } xmlhttprequest.send(); alert("我是最后一行的代码"); // 用于查看当服务器因为休眠没有返回数据时会不会先执行alert
// 此时点击ajax request后不会有任何显示,知道3s后才会依次显示"收到服务器返回的数据..."和"我是最后一行的代码" // 如果将xmlhttprequest.open中的false改为true,点击按钮后会立即显示"我是最后一行的代码",过3s后显示"收到服务器返回的数据..." // 假设现在有多个按钮,如果不设置异步发起请求的话,点击其中一个按钮整个页面就卡住,需要等服务器返回数据才能点击其他按钮(即不会影响页面的其他功能) <button onclick="ajaxRequest()">ajax request</button> <div id="div01"></div>
2.2 jQuery 中的 AJAX 请求
2.2.1 $.ajax 方法
$(function(){ // ajax请求 $("#ajaxBtn").click(function(){ $.ajax({ url:"http://localhost:8080/JSON_AJAX/ajaxServlet", // data:"action=jQueryAjax", data:{action:"jQueryAjax"}, type:"GET", // 这个data是返回的数据,不是上面的data属性 success:function (data) { // 当dataTye是text时,需要执行下面两句将字符串转换为Jsond对象 // alert("服务器返回的数据是:" + data); // var jsonObj = JSON.parse(data); // 当dataTye是json时,data就是json对象,可直接使用 $("#msg").html(" ajax 编号:" + data.id + " , 姓名:" + data.name); }, dataType : "json" }); }); });
protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println(" jQueryAjax == 方法调用了"); Person person = new Person(1, "psj"); // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); }
<div> <button id="ajaxBtn">$.ajax请求</button> <button id="getBtn">$.get请求</button> <button id="postBtn">$.post请求</button> <button id="getJSONBtn">$.getJSON请求</button> </div> <div id="msg">
2.2.2 $.get 方法和$.post 方法
// ajax--get请求 $("#getBtn").click(function(){ $.get("http://localhost:8080/JSON_AJAX/ajaxServlet","action=jQueryGet",function (data) { $("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name); },"json"); }); // ajax--post请求 $("#postBtn").click(function(){ // post请求 $.post("http://localhost:8080/JSON_AJAX/ajaxServlet","action=jQueryPost",function (data) { $("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name); },"json"); });
protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println(" jQueryPost == 方法调用了"); Person person = new Person(1, "psj"); // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); } protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println(" jQueryGet == 方法调用了"); Person person = new Person(1, "psj"); // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); }
2.2.3 $.getJSON 方法
// ajax--getJson请求 $("#getJSONBtn").click(function(){ $.getJSON("http://localhost:8080/JSON_AJAX/ajaxServlet","action=jQueryGetJSON",function (data) { $("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name); }); });
protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println(" jQueryGetJSON == 方法调用了"); Person person = new Person(1, "psj"); // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); }
2.2.4 表单序列化 serialize()
// ajax请求 $("#submit").click(function(){ // 把表单进行参数序列化,执行$("#form01").serialize()后会把表单中的username="xxx"等以拼接的形式组合传给服务器 $.getJSON("http://localhost:8080/JSON_AJAX/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) { $("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name); }); });
<form id="form01" > 用户名:<input name="username" type="text" /><br/> 密码:<input name="password" type="password" /><br/> 下拉单选:<select name="single"> <option value="Single">Single</option> <option value="Single2">Single2</option> </select><br/> 下拉多选: <select name="multiple" multiple="multiple"> <option selected="selected" value="Multiple">Multiple</option> <option value="Multiple2">Multiple2</option> <option selected="selected" value="Multiple3">Multiple3</option> </select><br/> 复选: <input type="checkbox" name="check" value="check1"/> check1 <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/> 单选: <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 <input type="radio" name="radio" value="radio2"/> radio2<br/> </form> <button id="submit">提交--serialize()</button>
protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println(" jQuerySerialize == 方法调用了"); System.out.println("用户名:" + req.getParameter("username")); System.out.println("密码:" + req.getParameter("password")); Person person = new Person(1, "psj"); // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); }
原文地址:https://blog.csdn.net/qq_41398418/article/details/123826712
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_37286.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。