JavaWeb--JSON&AJAX

2023-01-01 14:48:51

JSON&AJAX

JSON

1. 什么是JSON？

JSON（JavaScript Object Notation）是一种轻量级的（相较xml而言）数据交换格式，易于人阅读和编写，同时也易于机器解析和生成；JSON采用完全独立于语言的文本格式，并且很多语言都提供了对JSON的支持（包括C、C++、Java、JavaScript、Perl、Python等），这使得JSON成为理想的数据交换格式

2. JSON在JavaScript中的使用

  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. JSON的访问

JSON本身是一个对象，JSON中的key可以理解为对象中的一个属性，访问key就类似访问对象的属性：JSON对象.key

示例：

// json的访问
alert(typeof(jsonObj)); //json是一个对象
alert(jsonObj.key1);
alert(jsonObj.key5.key5_1);
alert(jsonObj.key6.length);
alert(jsonObj.key6[0]);
alert(jsonObj.key6[0].key6_1_2);
  1. JSON的两个常用方法

JSON有两种存在形式

  • 以对象的形式存在
  • 以字符串的形式存在

一般在操作JSON中的数据时，需要JSON以对象的形式存在，而在客户端与服务器交换数据时，需要JSON以字符串的形式存在

两个方法：

JSON.stringfy() 将JSON对象转换为JSON字符串

JSON.parse() 将JSON字符串转换为JSON对象

示例：

// json对象转字符串
var jsonObjStr = JSON.stringify(jsonObj);
alert(jsonObjStr);

// json字符串转json对象
var jsonObj2 = JSON.parse(jsonObjStr);
alert(jsonObj2);
alert(jsonObj2.key1);

3. JSON在Java中的使用

  1. JavaBean和JSON的互相转化
//1. javaBean和json的互相转换
@Test
public void test1(){
    Person person = new Person(1, "三上悠亚");
    //json操作，首先需要有一个gson对象
    Gson gson = new Gson();

    //将javaBean对象转换成为json字符串
    String pjStr = gson.toJson(person);
    System.out.println(pjStr);

    //将json字符串转换成为javaBean对象
    Person person1 = gson.fromJson(pjStr, Person.class);
    System.out.println(person1);
}
  1. List集合和JSON的互相转化
//2. list和json的互相转换
@Test
public void test2(){
    List<Person> personList = new ArrayList<>();

    personList.add(new Person(1,"三上悠亚"));
    personList.add(new Person(2,"天使萌"));

    Gson gson = new Gson();

    //将list集合转换为json字符串
    String pLJStr = gson.toJson(personList);
    System.out.println(pLJStr);

    //将json字符串转换为list集合
    //使用匿名内部类new TypeToken<List<Person>>() {}.getType()传入Type类型的参数
    List<Person> personList2 = gson.fromJson(pLJStr, new TypeToken<List<Person>>() {}.getType());
    System.out.println(personList2);
    Person person = personList2.get(0);
    System.out.println(person);
}
  1. Map和JSON的互相转化
//3. map和json的互相转换
@Test
public void test3(){
    Map<Integer,Person> personMap = new HashMap<>();

    personMap.put(1,new Person(1,"三上悠亚"));
    personMap.put(2,new Person(1,"桥本有菜"));

    Gson gson = new Gson();

    //将map集合转换为json字符串
    String mJStr = gson.toJson(personMap);
    System.out.println(mJStr);

    //将json字符串转换为map集合
    Map<Integer,Person> personMap1 = gson.fromJson(mJStr,new TypeToken<Map<Integer,Person>>(){}.getType());
    System.out.println(personMap1);
    Person person = personMap1.get(1);
    System.out.println(person);
}

AJAX

1. 什么是AJAX请求？

AJAX即”Asynchronous JavaScript And XML“（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术；通过JS异步发起请求，可以实现页面的局部更新

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

2. 原生AJAX请求

示例：

<!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">
         function ajaxRequest() {
//              1、我们首先要创建XMLHttpRequest 
            var xHR = new XMLHttpRequest();
//              2、调用open方法设置请求参数
            xHR.open("GET","http://localhost:8080/11_json_ajax/ajaxServlet?action=javaScriptAjax",true);
//              4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
            xHR.onreadystatechange = function () {
               if(xHR.readyState == 4 && xHR.status == 200){
                  // alert(xHR.responseText);

                  //把响应的数据显示在页面上
                  var jsonObj = JSON.parse(xHR.responseText);
                  document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + "，姓名：" + jsonObj.name;

               }
            }
//              3、调用send方法发送请求
            xHR.send();
//
         }
      </script>
   </head>
   <body> 
      <button onclick="ajaxRequest()">ajax request</button>
      <div id="div01">
      </div>
   </body>
</html>

Servlet程序：

protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        System.out.println("Ajax请求");

        Person person = new Person(1,"相泽南");

        Gson gson = new Gson();
        String pJStr = gson.toJson(person);

        resp.getWriter().write(pJStr);
    }

3. jQuery中的AJAX请求

$.ajax方法

​ url：请求的地址

​ type：请求的类型，GET或POST请求

​ data：发送给服务器的数据

​ 格式有两种：

​ 一、name=value&name=value

​ 二、{key:value}

​ success：请求成功之后响应的回调函数

​ dataType：响应的数据类型

​ 常见的数据类型有：

​ text：纯文本

​ xml：xml数据

​ json：json对象

// ajax请求
$("#ajaxBtn").click(function(){
   
   $.ajax({
      url:"http://localhost:8080/11_json_ajax/ajaxServlet",
      data:"action=jQueryAjax",
      type:"GET",
      success:function (data) {

         // var jsonObj = JSON.parse(data);
         // $("#msg").html("编号：" + jsonObj.id + "，姓名：" + jsonObj.name);
         $("#msg").html("Ajax编号：" + data.id + "，姓名：" + data.name);
      },
      // dataType:"text"
      dataType:"json"
   });
});

$.get方法和$.post方法

url：请求的url地址

data：发送给服务器的数据

callback：请求成功之后响应的回调函数

type：返回的数据类型

// ajax--get请求
$("#getBtn").click(function(){

   $.get("http://localhost:8080/11_json_ajax/ajaxServlet","action=jQueryAjaxGet",function (data) {
      $("#msg").html("Get编号：" + data.id + "，姓名：" + data.name);
   },"json");
   
});

// ajax--post请求
$("#postBtn").click(function(){
   // post请求

   $.get("http://localhost:8080/11_json_ajax/ajaxServlet","action=jQueryAjaxPost",function (data) {
      $("#msg").html("Post编号：" + data.id + "，姓名：" + data.name);
   },"json");
});

$.getJSON方法

url：请求的url地址

data：发送给服务器的数据

callback：请求成功之后响应的回调函数

// ajax--getJson请求
$("#getJSONBtn").click(function(){
   // 调用

   $.getJSON("http://localhost:8080/11_json_ajax/ajaxServlet","action=jQueryAjaxGetJson",function (data) {
      $("#msg").html("GetJson编号：" + data.id + "，姓名：" + data.name);
   })

});

表单序列化serialize()

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

// ajax请求
$("#submit").click(function(){
   // 把参数序列化
   // alert($("#form01").serialize());
   $.getJSON("http://localhost:8080/11_json_ajax/ajaxServlet","action=jQueryAjaxSerialize&" + $("#form01").serialize(),function (data) {

      $("#msg").html("Serialize编号：" + data.id + "，姓名：" + data.name);
   })
});

Servlet程序：

protected void jQueryAjaxSerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("jQueryAjaxSerialize请求");

    System.out.println("用户名：" + req.getParameter("username"));
    System.out.println("密码：" + req.getParameter("password"));

    Person person = new Person(1,"相泽南");

    Gson gson = new Gson();
    String pJStr = gson.toJson(person);

    resp.getWriter().write(pJStr);
}
上一篇：codeforces 1106 E


下一篇：微信开发之公众号创建按钮