JavaWeb-JSON、AJAX

Neo丶

已于 2023-03-20 19:38:45 修改

阅读量242

点赞数

文章标签： json ajax 前端

于 2023-03-20 00:45:43 首次发布

本文链接：https://blog.csdn.net/Ego_Ekko/article/details/129616296

版权

JSON

JSON是一种轻量级（与xml相比）的数据交换格式（客户端和服务器之间业务数据的传递格式），易于人阅读和编写，同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对JSON的支持，使得JSON成为理想的数据交换格式。

JSON在JavaScript中的使用

JSON是由键值对组成，并且有花括号{}包围，每一个键由引号引起来，键和值之间使用冒号进行分隔，多组键值对之间使用逗号进行分隔。

<!DOCTYPE html>
<html lang="en">
<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">
      //json定义
      var jsonObj = {
          "key1":1,
          "key2":"test",
          "key3":true,
          "key4":[11,"arr",false],
          "key5":{
              "key5_1":551,
              "key5_2":"key5_2Value"
          },
          "key6":[{
              "key6_1":611
          },{
              "key6_2":621
          }]
      };
      alert(typeof (jsonObj));  //JSON就是对象

      //json访问（JSON本身是一个对象，JSON中的key可以理解为是对象中的一个属性）
      //json中的key访问就像对象访问属性一样，json对象.key
      alert(jsonObj.key1);
      alert(jsonObj.key2);
      alert(jsonObj.key3);
      alert(jsonObj.key4);
      alert(jsonObj.key5.key5_1);
      //取出来元素是json对象
      var jsonItem = jsonObj.key6[0];
      alert(jsonItem.key6_1);
      //json对象转json字符串
      var jsonObjString = JSON.stringify(jsonObj);
      alert(jsonObjString);
      //json字符串转json对象
      var jsonObj2 = JSON.parse(jsonObjString);
      alert(jsonObj2)
      
  </script>
</head>
<body>

</body>
</html>

JSON在Java中的使用

①JavaBean和JSON的互相转换

②List和JSON的互相转换

③Map和JSON的互相转换

package com.pero.pojo;

public class Person {
    private Integer id;
    private String name;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Person(Integer id, String name) {
        this.id = id;
        this.name = name;
    }

    public Person() {
    }

    @Override
    public String toString() {
        return "Person{" +
                "id=" + id +
                ", name='" + name + '\'' +
                '}';
    }
}

package com.pero.json;

import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import com.pero.pojo.Person;
import org.junit.Test;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class JsonTest {
    /**
     * JavaBean和Json的互相转换
     */
    @Test
    public void test1(){
        Person person = new Person(2115886, "pero");
        //创建Gson对象实例
        Gson gson = new Gson();
        //toJson方法可以把java对象转换成为Json字符串
        String personJsonString = gson.toJson(person);
        System.out.println(personJsonString);
        /*
        fromJson把json字符串转换为java对象
        第一个参数是json字符串
        第二个参数是转换回去的Java对象类型
        */
        Person person1 = gson.fromJson(personJsonString, Person.class);
        System.out.println(person1);
    }

    /**
     * List和Json的互相转换
     */
    @Test
    public void test2(){
        List<Person> personList = new ArrayList<>();
        personList.add(new Person(6688668,"pero"));
        personList.add(new Person(8866886,"root"));

        Gson gson = new Gson();
        String personJsonString = gson.toJson(personList);
        System.out.println(personJsonString);

        //List<Person> list = gson.fromJson(personJsonString,new PersonListType().getType());
        List<Person> list = gson.fromJson(personJsonString,new TypeToken<ArrayList<Person>>(){}.getType());
        Person person = list.get(0);
        System.out.println(person);
    }

    /**
     * Map和Json的互相转换
     */
    @Test
    public void test3(){
        Map<Integer,Person> personMap = new HashMap<>();
        personMap.put(1,new Person(6688886,"root"));
        personMap.put(2,new Person(8866688,"pero"));

        Gson gson = new Gson();
        String personMapJsonString = gson.toJson(personMap);
        System.out.println(personMapJsonString);

//        Map<Integer,Person> personMap1= gson.fromJson(personMapJsonString, new PersonMapType().getType());
        Map<Integer,Person> personMap1= gson.fromJson(personMapJsonString,new TypeToken<HashMap<Integer,Person>>(){}.getType());
        Person person = personMap1.get(1);
        System.out.println(person);
    }
}

package com.pero.json;


import com.google.gson.reflect.TypeToken;
import com.pero.pojo.Person;

import java.util.ArrayList;

public class PersonListType extends TypeToken<ArrayList<Person>> {
}

package com.pero.json;

import com.google.gson.reflect.TypeToken;
import com.pero.pojo.Person;

import java.util.HashMap;

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

AJAX

AJAX全称为“Asynchronous Javascript And XML”即异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术。AJAX是一种浏览器通过JavaScript异步发起请求，局部更新页面的技术。

原生JavaScript的AJAX请求示例

AJAX请求的局部更新浏览器中地址栏不会发生变化，局部更新不会舍弃原来界面的内容，异步发起请求提高浏览器界面的用户体验，在用户使用浏览器界面中的内容时，交互请求不会等到收到服务器响应后才做反应，每个交互都是不同步的。

package com.pero.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.lang.reflect.Method;

public abstract class BaseServlet extends HttpServlet {

    protected void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
    protected void delete(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
    protected void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String action = request.getParameter("action");
        try {
            Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
            method.invoke(this,request,response);
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }
}

package com.pero.servlet;

import com.google.gson.Gson;
import com.pero.pojo.Person;
import jakarta.servlet.*;
import jakarta.servlet.http.*;

import java.io.IOException;

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("ajax请求");
        Person person = new Person(5666868,"pero");
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        response.getWriter().write(personJsonString);
    }

}

<!DOCTYPE html>
<html lang="en">
<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">
        //在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet
        function ajaxRequest() {
            //①首先要创建XMLHttpRequest
            var xmlHttpRequest = new XMLHttpRequest();
            //②调用open方法设置请求参数
            xmlHttpRequest.open("GET", "http://localhost:8080/JSON_AJAX_I18N/ajaxServlet?action=javaScriptAjax", true);
            //④在send方法前绑定onreadystatechange事件，处理请求完成后的操作
            xmlHttpRequest.onreadystatechange = function () {
                if (!xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    return;
                }
                //把相应的数据显示到页面上
                var jsonObj = JSON.parse(xmlHttpRequest.responseText)
                document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + "姓名：" + jsonObj.name;
            }
            //③调用send方法发送请求
            xmlHttpRequest.send();
        }
    </script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">

</div>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
         version="5.0">
    <servlet>
        <servlet-name>AjaxServlet</servlet-name>
        <servlet-class>com.pero.servlet.AjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AjaxServlet</servlet-name>
        <url-pattern>/ajaxServlet</url-pattern>
    </servlet-mapping>
</web-app>

jQuery的AJAX方法

$.ajax方法

url：表示请求的地址；

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

data：表示发送给服务器的数据，格式有两种：①key=value&key=value②{key:value}

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

dataType：响应的数据类型。常用的数据类型有text（表示纯文本）、xml（xml数据）、json（json对象）

jQuery的GET和POST方法

$.get方法和$.post方法

url：请求的url地址

data：发送的数据

callback：成功的回调函数

type：返回的数据类型

jQuery的getJSON方法

$.getJSON方法

url：请求的url地址

data：发送的数据

callback：成功的回调函数

package com.pero.servlet;

import com.google.gson.Gson;
import com.pero.pojo.Person;
import jakarta.servlet.*;
import jakarta.servlet.http.*;

import java.io.IOException;

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("ajax请求");
        Person person = new Person(5666868,"pero");
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        response.getWriter().write(personJsonString);
    }
    protected void jQueryAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("jQueryAjax请求");
        Person person = new Person(5666868,"pero");
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        response.getWriter().write(personJsonString);
    }
    protected void jQueryGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("jQueryGet请求");
        Person person = new Person(5666868,"pero");
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        response.getWriter().write(personJsonString);
    }

    protected void jQueryPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("jQueryPost请求");
        Person person = new Person(5666868,"pero");
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        response.getWriter().write(personJsonString);
    }

    protected void jQueryGetJSON(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("jQueryGetJSON请求");
        Person person = new Person(5666868,"pero");
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        response.getWriter().write(personJsonString);
    }
}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/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.js"></script>
    <script type="text/javascript">
        $(function () {
            //ajax请求
            $("#ajaxBtn").click(function () {
                $.ajax({
                    url: "http://localhost:8080/JSON_AJAX_I18N/ajaxServlet",
                    data: "action=jQueryAjax",
                    type: "GET",
                    success: function (msg) {
                        //alert("服务器返回的数据是" + msg)
                        //var jsonObj = JSON.parse(msg)
                        $("#msg").html("ajax编号：" + msg.id + "姓名：" + msg.name);
                    },
                    dataType: "json"
                });
            });

            //ajax-get请求
            $("#getBtn").click(function () {
                $.get("http://localhost:8080/JSON_AJAX_I18N/ajaxServlet", "action=jQueryGet", function (msg) {
                    $("#msg").html("get编号：" + msg.id + "姓名：" + msg.name);
                }, "json");
            });

            //ajax-post请求
            $("#postBtn").click(function () {
                $.post("http://localhost:8080/JSON_AJAX_I18N/ajaxServlet", "action=jQueryPost", function (msg) {
                    $("#msg").html("post编号：" + msg.id + "姓名：" + msg.name);
                }, "json");
            });

            //ajax-getJson请求
            $("#getJSONBtn").click(function () {
                $.getJSON("http://localhost:8080/JSON_AJAX_I18N/ajaxServlet", "action=jQueryGetJSON", function (msg) {
                    $("#msg").html("getJSON编号：" + msg.id + "姓名：" + msg.name);
                });
            });
        });
    </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>
</body>
</html>

jQuery的serialize方法

package com.pero.servlet;

import com.google.gson.Gson;
import com.pero.pojo.Person;
import jakarta.servlet.*;
import jakarta.servlet.http.*;

import java.io.IOException;

public class AjaxServlet extends BaseServlet {

    ...

    protected void jQuerySerialize(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("jQuerySerialize请求");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println("用户名：" + username);
        System.out.println("密码：" + password);
        Person person = new Person(6688666, username);
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        response.getWriter().write(personJsonString);
    }
}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/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.js"></script>
    <script type="text/javascript">
        $(function () {
            ...
            //ajax请求
            $("#submit").click(function () {
                //参数序列化
                $.getJSON("http://localhost:8080/JSON_AJAX_I18N/ajaxServlet", "action=jQuerySerialize&" + $("#form01").serialize(), function (msg) {
                    $("#msg").html("jQuerySerialize编号：" + msg.id + "姓名：" + msg.name);
                })
            })
        });
    </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/>
<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"></option>
</select><br/>
    下拉多选：
    <select name="multiple" multiple="multiple">
        <option selected="selected" value="Multiple1">Multiple1</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
</form>
<button id="submit">提交--serialize</button>
</body>
</html>

Neo丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb-JSON、AJAX

JSON是一种轻量级（与xml相比）的数据交换格式（客户端和服务器之间业务数据的传递格式），易于人阅读和编写，同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对JSON的支持，使得JSON成为理想的数据交换格式。
复制链接

扫一扫