JSON 和 AJAX 学习总结

系统管理员 2022-12-02 00:48 343阅读 0赞

JSON和AJAX

文章目录

  • JSON和AJAX
    • 一、JSON的介绍
    • 二、JSON在JavaScript中的使用
    • 三、JSON的两个常用方法
    • 四、JSON在Java中的使用
    • 五、AJAX的介绍
    • 六、AJAX的使用
    • 七、案例：校验用户名是否存在

一、JSON的介绍

  1. JSON是一种轻量级的数据交换格式，JSON采用完全独立于语言的文本格式，很多语言都提供了 对JSON的支持(C、JAVA、JavaScript等)，这就使得JSON成为理想的数据交换格式
  2. 数据交换指的是客户端和服务器之间数据的传递格式

二、JSON在JavaScript中的使用

  1. JSON的定义
    JSON是由键值对组成，并且由大括号包围，每个键由引号引起(不使用引号也可以)，键和值之间 使用冒号进行分割，多组键值对之间由逗号进行分割 (最后一组不加逗号)

代码演示：JSON定义的实例

  1. <script type="text/javascript"> var jsonObj = { "key1":12, "key2":"abc", "key3":true, "key4":[11,"arr",false], //JSON中套JSON "key5":{ "key5_1":551, "key5_2":"key5_2" }, //数组中放JSON "key6":[{ "key6_1_1":611, "key6_1_2":621 },{ "key6_2_1":621, "key6_2_2":622 }] }; </script>
  1. JSON的访问
    JSON本身是一个对象，JSON中的key可以理解为是对象中的一个属性，JSON中的key的访问与 访问对象的属性一致：JSON对象.key

代码演示：JSON对象的访问

  1. alert(typeof (jsonObj)); //Object
  2. alert(jsonObj.key1); //12
  3. alert(jsonObj.key4); //11,arr,false
  4. //JSON中数组值的遍历
  5. for (var i = 0; i < jsonObj.key4.length; i++) {
  6.     alert(jsonObj.key4[i]);
  7. }
  8. //访问JSON中定义的JSON
  9. alert(jsonObj.key5.key5_1); //551
  10. alert(jsonObj.key6); //[object Object],[object Object]
  11. //取出来的每一个元素都是JSON对象
  12. var key6Element = jsonObj.key6[0];
  13. alert(key6Element.key6_1_1); //611
  14. alert(key6Element.key6_1_2); //621

三、JSON的两个常用方法

  1. JSON的存在有两种形式
    (1) 对象的形式存在，称为JSON对象
    此形式常用于操作JSON中的数据
    (2) 字符串的形式存在，称为JSON字符串
    此形式常用于在客户端和服务器之间进行数据的交换
  2. JSON的两个方法
    (1) JSON.stringify(JSON对象)：把JSON对象转换成为JSON字符串(类似JAVA中的toString方法)
    (2) JSON.parse(字符串)：把JSON字符串转换成为JSON对象

代码演示：JSON中的两个方法

  1. var stringify = JSON.stringify(jsonObj);
  2. alert(stringify); //JSON对象中的所有内容全部转换为字符串
  3. var jsonObj2 = JSON.parse(stringify);
  4. alert(jsonObj2.key1); //12
  5. alert(jsonObj2.key2); //abc

四、JSON在Java中的使用

  1. 需要先导入jar包在这里插入图片描述
  2. 创建Gson实例，调用 (1) toJson()方法：将参数转换成JSON字符串
    (2) fromJson()方法：将参数JSON字符串还原

代码演示：JavaBean和JSON的转换

  1. @Test
  2. public void test1(){ 
  3.     //Person类中有id和name属性
  4.     Person person = new Person(12, "jay");
  5.     //创建Gson对象实例
  6.     Gson gson = new Gson();
  7.     //toString方法将java对象转换成JSON字符串
  8.     String toJson = gson.toJson(person);
  9.     System.out.println(toJson); //{"id":12,"name":"jay"}
  10.     //fromJson方法将JSON字符串转换成Java对象
  11.     //第一个参数是需要转换的JSON字符串
  12.     //第二个参数是转换回去的Java对象类型
  13.     Person person1 = gson.fromJson(toJson, Person.class);
  14.     System.out.println(person1); //Person{id=12, name='jay'}
  15. }

代码演示：List集合和JSON的转换

  1. @Test
  2. public void test2(){ 
  3.     ArrayList<Person> personList = new ArrayList<>();
  4.     personList.add(new Person(1,"Tom"));
  5.     personList.add(new Person(2,"Jerry"));
  6.     //创建Gson对象
  7.     Gson gson = new Gson();
  8.     //把List集合转换成为JSON字符串
  9.     String s = gson.toJson(personList);
  10.     System.out.println(s); //[{"id":1,"name":"Tom"},{"id":2,"name":"Jerry"}]
  11.     /*将JSON字符串还原，如果还原的是集合，第二个参数是Type类型 首先创建一个类(PersonListType)，此类继承TypeToken<T>， T泛型是要转换回去的类型，T是List<Person>或ArrayList<Person> 则此类为PersonListType extends TypeToken<ArrayList<Person>> 此类什么都不做，类体是空的 */
  12.     List<Person> list = gson.fromJson(s, new PersonListType().getType());
  13.     System.out.println(list); //[Person{id=1, name='Tom'}, Person{id=2, name='Jerry'}]
  14. }

代码演示：Map集合和JSON的转换

  1. @Test
  2. public void test3(){ 
  3.     Map<Integer,Person> personMap = new HashMap<>();
  4.     personMap.put(1, new Person(1, "Dog"));
  5.     personMap.put(2, new Person(2, "Cat"));
  6.     Gson gson = new Gson();
  7.     String JsonString = gson.toJson(personMap);
  8.     System.out.println(JsonString); //{"1":{"id":1,"name":"Dog"},"2":{"id":2,"name":"Cat"}}
  9.     //将JSON字符串转换为集合时，还有一种简便方式：匿名内部类
  10.     Map<Integer,Person> personMap2 =
  11.          gson.fromJson(JsonString, new TypeToken<HashMap<Integer,Person>>(){ }.getType());
  12.     System.out.println(personMap2); //{1=Person{id=1, name='Dog'}, 2=Person{id=2, name='Cat'}}
  13. }

五、AJAX的介绍

  1. 异步和同步的概念：
    在这里插入图片描述
  2. AJAX的概念：ASynchronous JavaScript And XML (异步的JavaScript和XML)，通过在后台与服务器 进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整 个网页的情况下，对网页的某部分进行更新。传统的网页(不使用Ajax)如果需要更 新内容，必须重载整个网页页面。

六、AJAX的使用

  1. JavaScript实现方式(只需了解，自行查阅资料)
  2. jQuery实现方式：
    (1) $.ajax({键值对}) (多个键值对之间使用逗号隔开，最后一个不加逗号)

代码演示：使用$.ajax()发送异步请求

  1. <head>
  2.     <meta charset="UTF-8">                    
  3.     <title>Title</title>                      
  4.     <script src="jquery-1.7.2.js"></script>  
  5.     <script type="text/javascript"> //定义单击事件执行的方法 function fun() { //使用$.ajax()发送异步请求 $.ajax({ url:"http://localhost:8080/MyTest/ajaxServlet", //请求路径 type:"POST", //请求方式，不写默认是get //data表示请求参数，有两种书写方式 data:{ "username":"jay","age":22}, //JSON形式，推荐 /*第二种：data:"username=jay&age=22"*/ //success表示响应成功之后自动执行的函数，参数可任意定义， //用来接收服务器响应的结果的值 success:function (result) { alert(result); }, //error表示响应出错时自动执行的函数 error:function () { alert("出错了！"); }, dataType:"text"//设置接收到的响应的格式 }) } </script>
  6. </head>
  7. <body>
  8.     <input type="button" value="发送异步请求" onclick="fun();">
  9. </body>
  11. @WebServlet("/ajaxServlet")
  12. public class AjaxServlet extends HttpServlet { 
  13.     @Override
  14.     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  15.         String username = request.getParameter("username");
  16.         response.getWriter().write("hello!" + username);
  17.     }
  19.     @Override
  20.     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  21.         this.doPost(request, response);
  22.     }
  23. }

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

点击之后出现hello！jay

  1. (2) $.get()：发送get请求

语法：$.get(url，[data]，[callback]，[type])
参数：url：请求路径
data：请求参数(可选)
callback：响应成功之后执行的函数(可选)
type：响应结果的类型(可选)

  1. (3) $.post()：发送post请求

语法：$.post(url，[data]，[callback]，[type])
参数：url：请求路径
data：请求参数(可选)
callback：响应成功之后执行的函数(可选)
type：响应结果的类型(可选)
(4) 举例：
在这里插入图片描述

注意：1. 可以通过谷歌浏览器的F12，在console中查看错误信息

  1. 如果要执行响应出错后的函数，必须使用 . a j a x ( ) ， 而 .ajax()，而 .ajax()，而.get()与$.post()仅有响应成功后的函数

七、案例：校验用户名是否存在

  1. 案例要求
    在这里插入图片描述
  2. 细节说明：
    服务器与客户端传输JSON格式的数据时，有两种方法：
    (1) 三种发送异步请求的方式中将响应结果的类型设置为”json”
    (2) 服务器设置MIME类型，jQuery会根据HTTP的MIME类型智能判断响应结果类型：
    response.setContentType(“application/json;charset=utf-8”);

代码演示1：创建注册页面

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <script src="jquery-3.3.1.min.js"></script>
  5.     <script type="text/javascript"> //页面加载完成事件 $(function () { //给username绑定失去焦点事件 $("#u_name").blur(function () { //获取username文本框的值 var username = $(this).val(); //发送异步请求，接收的数据格式是{"userExist":boolean,"msg":String} $.get("http://localhost:8080/MyTest/registServlet", { username:username},function (data) { //获取span标签对象，方便赋值 var span = $("#s_pan"); //判断用户名是否存在 if (data.userExist) { span.css("color","red"); span.html(data.msg); } else { span.css("color","green"); span.html(data.msg); } }) }) }) </script>
  6. </head>
  7. <body>
  8.     <input type="text" id="u_name" name="username" placeholder="请输入用户名">
  9.     <span id="s_pan"></span> <br>
  10.     <input type="password" name="password" placeholder="请输入密码"> <br>
  11.     <input type="submit" value="注册">

代码演示2：创建Servlet程序

  1. @WebServlet("/registServlet")
  2. public class registServlet extends HttpServlet { 
  3.     @Override
  4.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  5.         //设置响应的格式为JSON
  6.         response.setContentType("application/json;charset=utf-8");
  7.         String username = request.getParameter("username");
  8.         //定义一个Map集合，存放响应的JSON数据
  9.         Map<String, Object> HashMap = new HashMap<>();
  10.         //判断用户名是否已经存在(假设此时只存在一个用户名Tom)
  11.         if ("Tom".equals(username)) { 
  12.             HashMap.put("userExist", true);
  13.             HashMap.put("msg", "此用户名太受欢迎,请更换一个");
  14.         } else { 
  15.             HashMap.put("userExist", false);
  16.             HashMap.put("msg", "用户名可用");
  17.         }
  18.         //将Map集合转换为JSON数据并回传给客户端
  19.         Gson gson = new Gson();
  20.         String json = gson.toJson(HashMap);
  21.         response.getWriter().write(json);
  22.     }
  23. }

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

发表评论

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

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

相关阅读