Json和Ajax

Hyong~~

于 2021-11-03 17:52:37 发布

阅读量993

点赞数 2

文章标签： json ajax javascript

本文链接：https://blog.csdn.net/Chen_JH001/article/details/121123563

版权

1、什么是 JSON?

1.1、JSON 在 JavaScript 中的使用。

1.1.1、json 的定义 json 是由键值对组成，并且由花括号（大括号）包围。

1.1.2、json 的访问 json 本身是一个对象。

1.1.3、json 的两个常用方法

1.2、JSON 在 java 中的使用

1.2.1、javaBean 和 json 的互转

1.2.2 List 和Json的转换

1.2.3 Map和Json的转换

2、AJAX 请求

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

2.2、原生 AJAX 请求的示例

2.3、jQuery 中的 AJAX 请求

1、什么是 JSON?

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。

JSON 采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python 等）。这样就使得 JSON 成为理想的数据交换格式。

json 是一种轻量级的数据交换格式。

轻量级指的是跟 xml 做比较。

数据交换指的是客户端和服务器之间业务数据的传递格式。

1.1、JSON 在 JavaScript 中的使用。

1.1.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.1.2、json 的访问 json 本身是一个对象。

json 中的 key 我们可以理解为是对象中的一个属性。

json 中的 key 访问就跟访问对象的属性一样： json 对象.key

json 访问示例：

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

1.1.3、json 的两个常用方法

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

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

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

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

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

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

       /*          JSON.stringify() 把json对象转换成为json字符串
        *
        *          JSON.parse()     把json字符串转换为json对象
        *
        *
        * */
            var jsonObjString = JSON.stringify(json);
            alert(jsonObjString);

            var JsonObj1 = JSON.parse(jsonObjString);
            alert(JsonObj1.key1)

1.2、JSON 在 java 中的使用

1.2.1、javaBean 和 json 的互转

 public void test(){
//1.JavaBean 与 Json之间的转换
         Student person = new Student("陈俊华",1);
         //创建Gson对象实例
         Gson gson = new Gson();
         //toJson方法可以把java对象转换成为json字符串
         String s = gson.toJson(person);
         System.out.println(s);
         //fronJson 把 json字符串转换为Java对象
         //第一个参数是json字符串
         //第二个参数是转换回去的Java对象类型
         Student student = gson.fromJson(s, Student.class);
         System.out.println(student);
     }

1.2.2 List 和Json的转换

//2.List和Json的互转
    @Test
    public void test2(){
        List<Student> studentList = new ArrayList<>();
        studentList.add(new Student("陈俊华",1));
        studentList.add(new Student("郑清波",2));

        Gson gson = new Gson();
        //把List转换为Json字符串
        String s = gson.toJson(studentList);
        System.out.println(s);

        //将Json中的List转换为Java中的List
        Type genericSuperclass = studentList.getClass().getGenericSuperclass();
        ParameterizedType p = (ParameterizedType) genericSuperclass;
        //1.字符串  2.要转换成为什么类型 new JSONListToJavaList().getType()
        //（String,Type） 类型用来讲JSON中的List转换为Java中的List
        List<Student>list = gson.fromJson(s,new JSONListToJavaList().getType());
        System.out.println(list);
        Student o = list.get(0);
        System.out.println(o);
    }

1.2.3 Map和Json的转换

//3.Map和json的转换
    @Test
    public void test3(){
        Map<String,Object> map = new HashMap<String,Object>();
        map.put("陈俊华",1);
        map.put("郑清波",2);
        Gson gson = new Gson();
        String s = gson.toJson(map, new TypeToken<HashMap<String, Object>>() {}.getType());
        System.out.println(s);

    }

2、AJAX 请求

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

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

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

2.2、原生 AJAX 请求的示例

<%--
  Created by IntelliJ IDEA.
  User: Distance
  Date: 2021/11/1
  Time: 16:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script>
    //使用javascript语言发起Ajax请求，访问服务器AjaxServlet中ajaxServlet
    //局部且异步
    function ajaxRequest(){
        //1.创建XMLHttpRequest对象
        var xmlHttpRequest = new XMLHttpRequest();
        //2.调用open方法设置请求方式和请求地址
        xmlHttpRequest.open("GET","http://localhost:8080/JavaWeb1_war_exploded/ajaxServlet?action=ajaxServlet1",true);
        //4.在send方法前绑定onreadystatechange事件，处理请求完成后的操作
        xmlHttpRequest.onreadystatechange = function (){
            //readyState 有4个属性值 0表示未完成初始化  4表示已经处理完成  status表示服务器是否正常 200表示正常 404表示不存在
            if(xmlHttpRequest.readyState== 4 && xmlHttpRequest.status==200){
               var d = document.getElementById("div_id");
               //将发送过来的Json字符串转换为Json对象
                //xmlHttpRequest.responseText 获得请求过来的信息
                var Json = JSON.parse(xmlHttpRequest.responseText);
                d.innerText="id:"+Json.id+"姓名:"+Json.name;
            }
        }

        //3.调用send方法发送请求
        xmlHttpRequest.send();
    }


</script>
<body>
<button onclick="ajaxRequest()">Request</button>
<div id="div_id"></div>
</body>
</html>

2.3、jQuery 中的 AJAX 请求

$.ajax 方法

url 表示请求的地址

type 表示请求的类型 GET 或 POST 请求

data 表示发送给服务器的数据格式有两种：

一：name=value&name=value

二：{key:value}

success 请求成功，响应的回调函数

dataType 响应的数据类型常用的数据类型有：

text 表示纯文本

xml 表示 xml 数据

json 表示 json 对象

$("#ajaxBtn").click(function(){
        alert(11);
        $.ajax({
            url:"http://localhost:8080/JavaWeb1_war_exploded/ajaxServlet",
          //数据格式
            // data:"action=ajaxServlet1",
            data:{action:"ajaxServlet1"},
          //提交类型
            type:"GET",
            success:function (data){
              alert(data);
                $("#msg").html("名字为:"+data.name + "Id为:"+data.id);
            },
          dataType:"json"
        });
      });

$.get 方法和$.post 方法

url 请求的 url 地址

data 发送的数据

callback 成功的回调函数

type 返回的数据类型

// $.get("url","data",callBake,dataType)

// $.post("url","data",callBake,dataType)

// ajax--get请求
      $("#getBtn").click(function(){
        // $.get("url","data",callBake,dataType)
        $.get("http://localhost:8080/JavaWeb1_war_exploded/ajax","action=proGet",function(data){
          alert(data.toString());
          $("#msg").html("get中获取的名字为:"+data.name + "Id为:"+data.id);
        },"json")

      });

      // ajax--post请求
      $("#postBtn").click(function(){
        //$.post("url","data",callBack,dataType)
        $.post("http://localhost:8080/JavaWeb1_war_exploded/ajax","action=proPost",function (data){
          alert(data);
          $("#msg").html("Post中获取的名字为:"+data.name + "Id为:"+data.id);
        },"json")

      });

$.getJSON 方法

url 请求的 url 地址

data 发送给服务器的数据

callback 成功的回调函数

$("#getJSONBtn").click(function(){
          //$.getJSON("url","data",callBack);
          $.getJSON("http://localhost:8080/JavaWeb1_war_exploded/ajax","action=proJson",function (data){
            alert(data);
            $("#msg").html("Json中获取的名字为:"+data.name + "Id为:"+data.id);
          })
      });

表单序列化 serialize()

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

// ajax请求
      $("#submit").click(function(){
        // 把参数序列化

          $.getJSON("http://localhost:8080/JavaWeb1_war_exploded/ajax","action=seariaz&"+$("#form01").serialize(),function (data){
            //将表格中的值转化为键值对形式serialize()
            alert($("#form01").serialize());
            $("#msg").html("seariaz中获取的名字为:"+data.name + "Id为:"+data.id);

        });
      });

整个页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function(){
      // ajax请求
      $("#ajaxBtn").click(function(){
        alert(11);
        $.ajax({
            url:"http://localhost:8080/JavaWeb1_war_exploded/ajaxServlet",
          //数据格式
            // data:"action=ajaxServlet1",
            data:{action:"ajaxServlet1"},
          //提交类型
            type:"GET",
            success:function (data){
              alert(data);
                $("#msg").html("名字为:"+data.name + "Id为:"+data.id);
            },
          dataType:"json"
        });
      });

      // ajax--get请求
      $("#getBtn").click(function(){
        // $.get("url","data",callBake,dataType)
        $.get("http://localhost:8080/JavaWeb1_war_exploded/ajax","action=proGet",function(data){
          alert(data.toString());
          $("#msg").html("get中获取的名字为:"+data.name + "Id为:"+data.id);
        },"json")

      });

      // ajax--post请求
      $("#postBtn").click(function(){
        //$.post("url","data",callBack,dataType)
        $.post("http://localhost:8080/JavaWeb1_war_exploded/ajax","action=proPost",function (data){
          alert(data);
          $("#msg").html("Post中获取的名字为:"+data.name + "Id为:"+data.id);
        },"json")

      });

      // ajax--getJson请求
      $("#getJSONBtn").click(function(){
          //$.getJSON("url","data",callBack);
          $.getJSON("http://localhost:8080/JavaWeb1_war_exploded/ajax","action=proJson",function (data){
            alert(data);
            $("#msg").html("Json中获取的名字为:"+data.name + "Id为:"+data.id);
          })
      });

      // ajax请求
      $("#submit").click(function(){
        // 把参数序列化

          $.getJSON("http://localhost:8080/JavaWeb1_war_exploded/ajax","action=seariaz&"+$("#form01").serialize(),function (data){
            //将表格中的值转化为键值对形式serialize()
            alert($("#form01").serialize());
            $("#msg").html("seariaz中获取的名字为:"+data.name + "Id为:"+data.id);

        });
      });

    });
  </script>
</head>
<body>
<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">

</div>

<br/><br/>
<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>
</body>
</html>

Hyong~~

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
Json和Ajax

目录1、什么是 JSON?1.1、JSON 在 JavaScript 中的使用。1.1.1、json 的定义 json 是由键值对组成，并且由花括号（大括号）包围。1.1.2、json 的访问 json 本身是一个对象。1.1.3、json 的两个常用方法1.2、JSON 在 java 中的使用1.2.1、javaBean 和 json 的互转1.2.2List 和Json的转换1.2.3 Map和Json的转换2、AJAX 请求2.1、什么是 AJAX ..
复制链接

扫一扫