ajax,json学习笔记（三）JSON和jquery实现ajax

最新推荐文章于 2023-12-26 18:05:12 发布

原创最新推荐文章于 2023-12-26 18:05:12 发布 · 315 阅读

2 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍JSON的基本概念及其在前后台数据交互中的应用，包括JSON的语法规则、解析方法及如何使用SpringMVC处理AJAX请求等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用JSON实现前后台数据交互，且方便

1、基本概念

   1) JSON(JavaScript Object Notation):javaScript对象表示方法
   2) 是存储和交换文本信息的语法，类似xml,采用键值对的方式来组织
   3) JSON是独立于语言的，任何语言按json规则就能解析json
   4）优点
       长度比xml短，读写速度快，可以用javaScript内建的方法直接解析转换成javascript对像

2、JSON 语法规则

   1）JSON 数据书写格式：名称/值对
       名称和值在双引号中，例如："name":"马玉"
   2）JSON值可以使数字、字符串、逻辑值、数组（在[]中）、对象（在{}中）、null

   例子
   {
        "people": [
           {
           "name": "郭靖",
                   "age": "12"
           },
           {
                   "name": "黄蓉",
                   "age": "12"
           }]
   }

3、JSON 解析

   1）方法：eval 和 JSON.parse
       注意：eval执行第三方JSON数据危险（可能有恶意代码）,会执行json字符串中的js方法
       JSON.parse()除了解析字符串还可以捕捉JSON中语法错误
   eval:     <script>
                   var jsondata =    '{"people": [{"name": "郭靖","age": "12"},{"name": "黄蓉","age": "12"}]}';
                   var dataObj=eval("("+jsondata+")");
                   alert(dataObj.people[0].name)
            </script>
   JSON.parse：    <script>
              var jsondata = '{"people": [{"name": "郭靖","age": "12"},{"name": "黄蓉","age": "12"}]}';
                      var dataObj=JSON.parse(jsondata);
                   alert(dataObj.people[0].name)
           </script>
   2)JSON校验工具：http://json.parser.online.fr/

4、约定JSON

   {
       "success":true,
       "msg":"xxx"
   }
   后台通过写成json字符串或者JSONArray.toJSON(Object)等方法把对象转化为json格式数据传到前台，前台js对其进行解析展示

5、 springmvc处理ajax请求

参考：https://www.cnblogs.com/tingbogiu/p/5796199.html

例子
后台： // ajax不用返回页面返回值为void
    @RequestMapping("/jQUeryTest")
    public void jQUeryTest(HttpServletRequest request, HttpServletResponse response){
       List<Category> cs= categoryService.list();
       // 把列表转为json数组，ModelAndView是直接把列表转为json格式
       String jsonResult = JSON.toJSONString(cs);
        renderData(response, jsonResult);
    }


   private void renderData(HttpServletResponse response, String data) {
       response.setCharacterEncoding("UTF-8");
        PrintWriter printWriter = null;
        try {
           printWriter = response.getWriter();
           printWriter.print(data);
        } catch (IOException ex) {
           System.out.println(ex);
        } finally {
           if (null != printWriter) {
               printWriter.flush();
               printWriter.close();
           }
        }
      }
页面：$(document).ready(function(){
       $("#test3").click (function(){
           $.ajax({
               type:'POST',
               url:'http://localhost:8080/MyFirstSSM/jQUeryTest',
               data: {
                },
               dataType:'json',
               success:function(data){   //已经解析
                   $("#test4").text("第1个用户:"+data[0].name);
               },
               error:function(jqXHR){
                   alert('发生错误：'+jqXHR.status);
               }
           });
       });
   });

6、jquery实现ajax

jQuery.ajax([settings])
   通过设置值来完成ajax请求
1、常用设置
   1）type:请求类型，‘post'或‘get'，默认’get'
   2）url:发送请求的地址
   3）data:一个对象，连同请求发送到服务器中的数据
   4）dataType:预期服务器返回的数据类型，如果不指定，jQuery自动根据HTTP包MIME信息智能判断，一般采用JSON，设置为'json'
   5) success:是一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串
   6）error:是一个方法，请求失败调用的函数，传入XMLHttpRequest对象
例子
       $("#test3").click (function(){
           $.ajax({
               type:'get',
               url:'http://localhost:8080/MyFirstSSM/listCategory',
               dataType:'json',
               success:function(data){   //已经解析过了字符串
                   $("#test4").text("第2个用户:"+data[1].name);
               },
               error:function(jqXHR){
                   alert('发生错误：'+jqXHR.status);
               }
           });
       });