JavaWeb篇-Json&Ajax

系统管理员 2021-06-10 20:40 538阅读 0赞

文章目录

  • Json&Ajax
    • Json
      • Json在JavaScript中使用
        • json的定义
        • json的访问
        • json对象转字符串
        • json字符串转json对象
      • Json在Java中使用
        • javaBean和json的互转
        • List 和json的互转
        • map 和json的互转
    • Ajax
      • 原生ajax请求
      • Jquery中的ajax请求
        • $.ajax({});
        • . g e t ( ) 和 .get()和 .get()和.post()
        • $.getJSON()
        • serialize()

Json&Ajax

Json

JSON (JavaScript Object Notation) 是一种轻量级( 轻量级指的是跟 xml 做比较 )的数据交换（ 数据交换指的是客户端和服务器之间业务数据的传递格式 ）格式。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python 等）。 这样就使得 JSON 成为理想的数据交换格式

Json在JavaScript中使用

json的定义

  1. var jsonOhbj = { 
  2.                 "key1":12,
  3.                 "key2":"abc",
  4.                 "key3":true,
  5.                 "key4":[11,"arr",false],
  6.                 "key5":{ 
  7.                     "key5_1" : 551,
  8.                     "key5_2" : "key5_2_value"
  9.                 },
  10.                 "key6":[{ 
  11.                     "key6_1_1":6611,
  12.                     "key6_1_2":"key6_1_2_value"
  13.                 },{ 
  14.                     "key6_2_1":6621,
  15.                     "key6_2_2":"key6_2_2_value"
  16.                 }]
  17.             };

json的访问

  1. alert(typeof(jsonObj));// object json就是一个对象
  2. alert(jsonObj.key1); //12
  3. alert(jsonObj.key2); // abc
  4. alert(jsonObj.key3); // true
  5. alert(jsonObj.key4);// 得到数组[11,"arr",false]
  6. // json 中 数组值的遍历
  7. for(var i = 0; i < jsonObj.key4.length; i++) { 
  8. alert(jsonObj.key4[i]);
  9. }
  10. alert(jsonObj.key5.key5_1);//551
  11. alert(jsonObj.key5.key5_2);//key5_2_value
  12. alert( jsonObj.key6 );// 得到json数组
  14. // 取出来每一个元素都是json对象
  15. var jsonItem = jsonObj.key6[0];
  16. // alert( jsonItem.key6_1_1 ); //6611
  17. alert( jsonItem.key6_1_2 ); //key6_1_2_value
  18. alert(jsonObj);

json对象转字符串

json 的存在有两种形式。 一种是：对象的形式存在，我们叫它 json 对象

一种是：字符串的形式存在，我们叫它 json 字符串

一般我们要操作 json 中的数据的时候，需要 json 对象的格式

一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串

JSON.stringify() 把 json 对象转换成为 json 字符串

  1. var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java中对象的toString
  2. alert(jsonObjString);

json字符串转json对象

  1. var jsonObj2 = JSON.parse(jsonObjString);
  2. alert(jsonObj2.key1);// 12
  3. alert(jsonObj2.key2);// abc

Json在Java中使用

javaBean和json的互转

  1. @Test
  2.     public void test1(){ 
  3.         Person person = new Person(1,"cV展示");
  4.         // 创建Gson对象实例
  5.         Gson gson = new Gson();
  6.         // toJson方法可以把java对象转换成为json字符串
  7.         String personJsonString = gson.toJson(person);
  8.         System.out.println(personJsonString);
  9.         // fromJson把json字符串转换回Java对象
  10.         // 第一个参数是json字符串
  11.         // 第二个参数是转换回去的Java对象类型
  12.         Person person1 = gson.fromJson(personJsonString, Person.class);
  13.         System.out.println(person1);
  14.     }

Person.java

  1. public class Person { 
  2.     private Integer id;
  3.     private String name;
  4.     ...
  5. }

运行结果:
在这里插入图片描述

List 和json的互转

有两种方式(见代码):

  1. @Test
  2.     public void test2() { 
  3.         List<Person> personList = new ArrayList<>();
  5.         personList.add(new Person(1, "cV展示"));
  6.         personList.add(new Person(2, "cvzhanshi"));
  8.         Gson gson = new Gson();
  10.         // 把List转换为json字符串
  11.         String personListJsonString = gson.toJson(personList);
  12.         System.out.println(personListJsonString);
  14.         //方式一：
  15.         //List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
  16.         //方式二：
  17.         List<Person> list = gson.fromJson(personListJsonString, new TypeToken<ArrayList<Person>>(){ }.getType());
  18.         System.out.println(list);
  19.         Person person = list.get(0);
  20.         System.out.println(person);
  21.     }

PersonListType.java

  1. public class PersonListType extends TypeToken<ArrayList<Person>> { 
  2. }

运行结果:

在这里插入图片描述

map 和json的互转

与list类似:

  1. @Test
  2.     public void test3(){ 
  3.         Map<Integer,Person> personMap = new HashMap<>();
  5.         personMap.put(1, new Person(1, "cV展示"));
  6.         personMap.put(2, new Person(2, "cvzhanshi"));
  8.         Gson gson = new Gson();
  9.         // 把 map 集合转换成为 json字符串
  10.         String personMapJsonString = gson.toJson(personMap);
  11.         System.out.println(personMapJsonString);
  13. // Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new PersonMapType().getType());
  14.         Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){ }.getType());
  16.         System.out.println(personMap2);
  17.         Person p = personMap2.get(1);
  18.         System.out.println(p);
  20.     }

PersonMapType.java

  1. public class PersonMapType extends TypeToken<HashMap<Integer, Person>> { 
  2. }

运行效果:

在这里插入图片描述

Ajax

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发 技术

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术

Ajax 请求的局部更新，浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容

原生ajax请求

代码示例:

html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="pragma" content="no-cache" />
  5.         <meta http-equiv="cache-control" content="no-cache" />
  6.         <meta http-equiv="Expires" content="0" />
  7.         <script type="text/javascript"> function ajaxRequest() { // 1、我们首先要创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest(); // 2、调用open方法设置请求参数 // // 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。 xmlHttpRequest.open("POST","http://localhost:8080/15_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true); xmlHttpRequest.onreadystatechange=function () { if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) { var jsonObj = JSON.parse(xmlHttpRequest.responseText); document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name; } }; 3、调用send方法发送请求 xmlHttpRequest.send(); } </script>
  8.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  9.         <title>Insert title here</title>
  10.     </head>
  11.     <body>    
  12.         <button onclick="ajaxRequest()">ajax request</button>
  13.         <div id="div01">
  14.         </div>
  15.     </body>
  16. </html>

servlet：

  1. protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  2.         System.out.println("Ajax请求过来了");
  3.         request.setCharacterEncoding("UTF-8");
  4. // response.setCharacterEncoding("");
  5.         Person person = new Person(1, "cvzhanshi");
  6.         try { 
  7.             Thread.sleep(500);
  8.         } catch (InterruptedException e) { 
  9.             e.printStackTrace();
  10.         }
  11.         // json格式的字符串
  12.         Gson gson = new Gson();
  13.         String personJsonString = gson.toJson(person);
  15.         response.getWriter().write(personJsonString);
  16.     }

Jquery中的ajax请求

$.ajax({});

$.ajax 方法
url 表示请求的地址
type 表示请求的类型 GET 或 POST 请求
data 表示发送给服务器的数据
格式有两种：
一：name=value&name=value
二：{key:value}
success 请求成功，响应的回调函数
dataType 响应的数据类型
常用的数据类型有：
text 表示纯文本
xml 表示 xml 数据
json 表示 json 对象

代码演示:

如果dataType是json的胡data不需要手动转为json类型

  1. // ajax请求
  2.                 $("#ajaxBtn").click(function(){ 
  4.                     $.ajax({ 
  5.                         url:"http://localhost:8080/15_json_ajax_i18n/ajaxServlet",
  6.                         // data:"action=jQueryAjax",
  7.                         data:{ action:"jQueryAjax"},
  8.                         type:"GET",
  9.                         success:function (data) { 
  10.                             // alert("服务器返回的数据是：" + data);
  11.                             // var jsonObj = JSON.parse(data);
  12.                         $("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
  13.                         },
  14.                         dataType : "json"
  15.                     });
  18.                 });

. g e t ( ) 和 .get()和 .get()和.post()

  1. $.get 方法和$.post 方法
  2.     url 请求的 url 地址
  3.     data 发送的数据
  4.     callback 成功的回调函数
  5.     type 返回的数据类型

代码演示:

  1. // ajax--get请求
  2. $("#getBtn").click(function(){                     $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) { 
  3.                         $("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
  4.                     },"json");
  6.                 });
  8.                 // ajax--post请求
  9. $("#postBtn").click(function(){ 
  10.                     // post请求 $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) { 
  11.                         $("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
  12.                     },"json");
  14.                 });

$.getJSON()

  1. $.getJSON 方法
  2.     url 请求的 url 地址
  3.     data 发送给服务器的数据
  4.     callback 成功的回调函数
  6. // ajax--getJson请求
  7.                 $("#getJSONBtn").click(function(){ 
  8.                     $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) { 
  9.                         $("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
  10.                     });
  11.                 });

serialize()

serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接

  1. // ajax请求
  2.                 $("#submit").click(function(){ 
  3.                     // 把参数序列化
  4.                     $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) { 
  5.                         $("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
  6.                     });
  7.                 });
  9. <form id="form01" >
  10.             用户名：<input name="username" type="text" /><br/>
  11.             密码：<input name="password" type="password" /><br/>
  12.             下拉单选：<select name="single">
  13.                   <option value="Single">Single</option>
  14.                   <option value="Single2">Single2</option>
  15.             </select><br/>
  16.               下拉多选：
  17.               <select name="multiple" multiple="multiple">
  18.                 <option selected="selected" value="Multiple">Multiple</option>
  19.                 <option value="Multiple2">Multiple2</option>
  20.                 <option selected="selected" value="Multiple3">Multiple3</option>
  21.               </select><br/>
  22.               复选：
  23.              <input type="checkbox" name="check" value="check1"/> check1
  24.              <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
  25.              单选：
  26.              <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  27.              <input type="radio" name="radio" value="radio2"/> radio2<br/>
  28.         </form>            
  29.         <button id="submit">提交--serialize()</button>

发表评论

表情：
评论列表 （有 0 条评论，538人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JavaWeb篇-EL表达式

    EL表达式 概念与作用 > EL 表达式主要是代替 jsp 页面中的表达式脚本在 jsp 页面中进行数据的输出。 因为 EL 表达式在输出数据的时候，要比 jsp

    港控/mmm°港控/mmm°/ 0 赞/ 481 阅读