Ajax（一：基础）

最新推荐文章于 2024-06-08 19:34:38 发布

这个ID没什么特点

最新推荐文章于 2024-06-08 19:34:38 发布

阅读量120

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/qq_43545801/article/details/114293172

版权

Ajax基础

什么是Ajax
Ajax怎么用
- 1. XMLHttpRequest对象
- 2. Ajax 的使用步骤
JSON详解

什么是Ajax

是指一种创建交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。
在这里插入图片描述

页面内的某些内容，在后台进行变化后，页面会闪烁。
使用Ajax之后，页面上的内容在Ajax执行刷新操作之前，是不会改变的，可以提升用户的体验感。

Ajax怎么用

1. XMLHttpRequest对象

XMLHttpRequest 是浏览器接口对象，该对象的 API 可被 JavaScript、VBScript 以及其它 web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成为 Ajax 编程的核心对象。

2. Ajax 的使用步骤

创建一个新的项目，名为ajaxdemo
在这里插入图片描述

导入servlet的jar包

配置tomcat的正确路径

创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

给定请求方式以及请求的地址

xhr.open("get","http://www.example.com");

发送请求

xhr.send();

获取服务器端发给客户的响应数据

        xhr.onreadystatechange = function () {
          //做一个状态的判断 readyState为4表示服务端 响应且响应结束 ; status为200表示响应成功
          if (xhr.readyState == 4 && xhr.status == 200){
            alert(xhr.responseText);
            //获取响应的内容，将其直接插入到span标签内
            document.getElementById("span").innerHTML = xhr.responseText;
          }
        }

全案例：
实现一个简单的异步请求，演示局部刷新
index.jsp:

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/2 0002
  Time: 20:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script>
      function but() {
        //创建XMLHttpRequest异步对象
        var xhr = new XMLHttpRequest();
        //确定请求方式和请求位置
        xhr.open("get","ajax.do");
        //发送异步请求
        xhr.send();
        //给xhr的一个属性赋值一个函数地址
        xhr.onreadystatechange = function () {
          //做一个状态的判断 readyState为4表示服务端 响应且响应结束 ; status为200表示响应成功
          if (xhr.readyState == 4 && xhr.status == 200){
            alert(xhr.responseText);
            //获取响应的内容，将其直接插入到span标签内
            document.getElementById("span").innerHTML = xhr.responseText;
          }
        }
      }
    </script>
  </head>
  <body>
  <h3>北京尚学堂</h3>
  <hr/>
  <span id="span"></span>
  <input type="button" value="OK" onclick="but()"/>
  </body>
</html>

创建servlet类 AjaxServlet.java :

package Try.com.bjsxt.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet {
    @Override
    /**
     * 在doGet内响应一个数据,这里注意，处理异步请求产生的响应，不可以使用请求转发或者是重定向的方式
     * 如果使用请求转发的方式，去请求jsp，jsp执行,jsp内存放是html代码，HTML代码就会被放到字符输出流内响应给浏览器，html代码内存在
     * 大量标签，浏览器页面就会执行一次刷新，这也就是让浏览器去处理响应，这是不对的，我们要自己去处理响应
     *
     * 我们应该使用字符输出流将结果推给客户端浏览器，最后推回给XMLHttpRequest对象，通过 responseText 去获取servlet取回来的数据
     */
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter pw = resp.getWriter();
        pw.println("Hello Ajax");
        pw.flush();
        pw.close();
    }
}

点击前：
在这里插入图片描述
点击：

点击后：

JSON详解

什么是JSON

JSON是一种基于字符串的轻量级数据交换格式。易于人去阅读和编写，同时也易于机器解析和生成。JSON是javascript数据类型的子集。

为什么要使用JSON

在 JSON 未出现之前在 Ajax 中对于数据传递方式，会使用 XML 作为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更小、更快，更易解析。

JSON的怎么用

JSON 就是按照特定的语法规则所生成的字符串结构。
在这里插入图片描述

数组：

JSON的6种数据类型

在这里插入图片描述

Jackson的使用

在 JDK 中并没有内置操作 JSON 格式数据的 API，因此使用处理 JSON 格式的数据需要借助第三方类库。

Jackson简介

Jackson: 社区十分活跃且更新速度很快。被称为“最好的 Json 解析器。
是一种解析 JSON 格式数据的 API，也是最流行，速度最快的 JSON API。在 SpringMVC 中默认使用 Jackson API 处理 JSON 格式的数据。

Jackson 下载地址： https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind

下载过程：
第一条下载路径
选择下载2.11.0的jar包
在这里插入图片描述

选择View All
在这里插入图片描述

在这里插入图片描述
另外两条路径也要下载同样版本的jar包

在响应当中通过JSON格式传递数据

在响应中使用 Jackson 处理 JSON 格式数据的步骤：

添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar
通过 jackson API 将 Java 对象转换 JSON 格式
修改响应头，响应类型为 application/json
将结果基于字符输出流推回客户端浏览器
在页面的中通过 JavaScript 的 JSON.parse()函数将 JSON 格式的数据转换为 JavaScript对象

通过 JSON 格式在响应中传递单个对象

怎么做：
定义一个 Users 类，包含 userid、username 属性。
实例化一个 Users 对象，通过 JSON 格式将 Users 对象响应到客户端浏览器。
将 Users 对象中的数据插入到页面中。

添加对应的jar包

在这里插入图片描述

创建com.bjsxt.pojo包，在包下添加Users类

package com.bjsxt.pojo;

public class Users {

    private int userid;
    private String username;

    public int getUserid() {
        return userid;
    }

    public void setUserid(int userid) {
        this.userid = userid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String usersname) {
        this.username = usersname;
    }

    @Override
    public String toString() {
        return "Users{" +
                "userid=" + userid +
                ", username='" + username + '\'' +
                '}';
    }
}

实例化一个 Users 对象，通过 JSON 格式将 Users 对象响应到客户端浏览器

创建servlet类

package com.bjsxt.servlet;

import com.bjsxt.pojo.Users;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * 通过JSON格式响应单个对象
 */
@WebServlet("/single.do")
public class SingleObjectServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //创建Users对象
        Users users = new Users();
        users.setUserid(1);
        users.setUsername("oldLu");
        System.out.println(users.toString());
        //使用jackson的API键Users对象转换为JSON格式的字符串对象
        ObjectMapper objectMapper = new ObjectMapper();
        String string =  objectMapper.writeValueAsString(users);
        System.out.println(string);
        //设置响应类型为application/json
        resp.setContentType("application/json");
        //定义输出流
        PrintWriter pw = resp.getWriter();
        //将转换完成的JSON字符串通过输出流推回给给客户端浏览器
        pw.print(string);
        pw.flush();
        pw.close();
    }
}

将 Users 对象中的数据插入到页面中

创建一个显示的前端页面

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/2 0002
  Time: 23:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JSON格式的单个对象响应</title>
    <script>
        function but(){
            var xhr = new XMLHttpRequest();
            xhr.open("get","single.do");
            xhr.send();
            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);

                    //通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对转换成javascript对象
                    var obj = JSON.parse(xhr.responseText);
                    alert(obj.userid+" "+obj.username);
                    document.getElementById("span").innerHTML=obj.userid+"<br/>"+obj.username;
                }
            }
        }
    </script>
</head>
<body>
<h3>JSON格式的单个对象响应</h3>
<hr/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

在这里插入图片描述

异常：
出现下面的异常时，只需将tomcat的项目删除掉，重新导入一次即可。
点我跳转到解决问题的页面

最好使用谷歌浏览器开发

在这里插入图片描述

通过JSON格式在响应内传递多个对象

需求：
定义一个 Users 类，包含 userid、username 属性。
实例化多个 Users 对象，通过 JSON 格式将 Users 对象响应到客户端浏览器。
将 Users 对象中的数据插入到页面中。

servlet类

HTML页面

package com.bjsxt.servlet;

import com.bjsxt.pojo.Users;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/multiple.do")
public class MultipleObjectServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //实例化多个user对象
        Users users1 = new Users();
        users1.setUserid(1);
        users1.setUsername("oldlu");
        Users users2 = new Users();
        users2.setUserid(2);
        users2.setUsername("kevin");

        //需要将多个对象放入到集合中
        List<Users> list = new ArrayList<>();
        list.add(users1);
        list.add(users2);

        //通过jackson将List转换为JSON格式的字符串对象
        ObjectMapper objectMapper = new ObjectMapper();
        String string = objectMapper.writeValueAsString(list);
        System.out.println(string);
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(string);
        pw.flush();
        pw.close();
    }
}

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/9 0009
  Time: 16:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JSON格式的多个对象响应</title>
    <script>
        function but(){
            var xhr = new XMLHttpRequest();
            xhr.open("get","multiple.do");
            xhr.send();
            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);

                    //通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对转换成javascript对象
                    var obj = JSON.parse(xhr.responseText);
                    var temp ="";
                    for(i=0;i<obj.length;i++){
                        alert(obj[i].userid+" "+obj[i].username);
                        temp += obj[i].userid+" "+obj[i].username+"<br/>"
                    }

                    document.getElementById("span").innerHTML=temp;
                }
            }
        }
    </script>
</head>
<body>
<h3>JSON格式的多个对象响应</h3>
<hr/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

在这里插入图片描述

在 JSON 中通过 Map 传递数据

如果我们返回的数据并没有对应的模型来存放数据，那么我们可以通过 Map 来解决。

servlet类

package com.bjsxt.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

/**
 * 使用Map模型传递数据
 */
@WebServlet("/map.do")
public class MapModelServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //一个map对象表示的是一个json格式的对象
        Map<String,Object> map = new HashMap<>();
        map.put("userid",1);
        //新赠一个url属性，而user实体类不可以随意改动，我们可以通过map通用模型去存放所有要返回的结果集
        map.put("url","map.do");

        ObjectMapper objectMapper = new ObjectMapper();
        String string  = objectMapper.writeValueAsString(map);
        System.out.println(string);
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(string);
        pw.flush();
        pw.close();
    }
}

mapDemo.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/9 0009
  Time: 17:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script>
        function but(){
            var xhr = new XMLHttpRequest();
            xhr.open("get","map.do");
            xhr.send();
            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                    //通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对转换成javascript对象
                    var obj = JSON.parse(xhr.responseText);
                    alert(obj.userid+" "+obj.url);
                    document.getElementById("span").innerHTML=obj.userid+"<br/>"+obj.url;
                }
            }
        }
    </script>
</head>
<body>
<h3>Map模型的使用</h3>
<hr/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

在这里插入图片描述

在请求中通过 JSON 格式传递数据

如果在请求中使用 JSON 格式传递数据，那么提交方式需要使用 POST 方式，通过 JavaScript 中的 JSON.stringify()函数将 JavaScript 对象转换为 JSON 格式数据。通过 send 方法将参数传递到 Servlet 中，在 Servlet 中通过字符输入流获取 JSON 格式数据。

步骤：

添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar
在页面的 JavaScript 中通过 JSON.stringify()函数将 JavaScript 对象转换为 JSON 格式的数据
将请求方式修改为 POST 方式
通过 send()函数将 JSON 格式的数据提交到服务端
在 Servlet 中通过字符输入流读取请求体中 JSON 格式的数据
通过 jackson API 将获取到的 JSON 格式的数据转换为 Java 对象

servlet类：

package com.bjsxt.servlet;

import com.bjsxt.pojo.Users;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/json.do")
public class RequestJSONServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //通过字符输入流从请求体中获取提交的JSON格式的数据
        req.setCharacterEncoding("utf-8");
        String s = req.getReader().readLine();
        
        //使用Jackson将JSON格式的字符串对象转换成java对象 
        ObjectMapper objectMapper = new ObjectMapper();
        Users users = objectMapper.readValue(s, Users.class);
        System.out.println(users.getUserid()+" "+users.getUsername());
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print("OK");
        pw.flush();
        pw.close();

    }
}

requestDemo.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/9 0009
  Time: 17:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script>
        function but(){
            var id= document.getElementById("userid").value;
            var name = document.getElementById("username").value;
            var obj = {userid:id,username:name};
            //将obj转为JSON格式的数据
            var content = JSON.stringify(obj);
            alert(content);
            var xhr = new XMLHttpRequest();
            xhr.open("post","json.do");
            xhr.send(content);
            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                    document.getElementById("span").innerHTML=xhr.responseText;
                }
            }
        }
    </script>
</head>
<body>
<h3>在请求中通过JSON格式传递数据</h3>
<hr/>
用户ID：<input name="userid" id="userid"/><br/>
用户姓名：<input name="username" id="username"/><br/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

在这里插入图片描述

Jackson的常用注解

先创建一个示例项目：

servlet类：

package com.bjsxt.servlet;

import com.bjsxt.pojo.Users;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * Jackson常用注解的使用
 */
@WebServlet("/ann.do")
public class AnnotationServlet  extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Users users = new Users();
        users.setUserid(1);
        users.setUsername("oldlu");
        ObjectMapper objectMapper = new ObjectMapper();
        String string = objectMapper.writeValueAsString(users);
        System.out.println(string);

        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print("Jackson Annotation");
        pw.flush();
        pw.close();
    }
}

annDemo.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/9 0009
  Time: 17:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Jackson常用注解</title>
    <script>
        function but(){
            var xhr = new XMLHttpRequest();
            xhr.open("get","ann.do");
            xhr.send();
            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                    document.getElementById("span").innerHTML=xhr.responseText;
                }
            }
        }
    </script>
</head>
<body>
<h3>Jackson常用注解</h3>
<hr/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

在这里插入图片描述

@JsonProperty

此注解用于属性上，作用是把该属性的名称序列改为另外一个名称，如把 username 属性序列改为 name，@JsonProperty(“name”)。

我们开始使用这个用于修改名字的注解
在user实体类的属性上添加注解：

    @JsonProperty("name")
    private String username;

再次输出：
在这里插入图片描述

@JsonIgnore

此注解用于属性或者方法上（一般都是定义在属性上），用来完全忽略被注解的字段和方法对应的属性，返回的 json 数据即不包含该属性。
也就是，在哪个属性上添加这个注解，该注解就不会出现在json内

    @JsonIgnore
    private String username;

在这里插入图片描述

@JsonFormat

此注解用于属性或者方法上（一般都是定义在属性上），可以方便的把 Date 类型属性的值直接转化为我们想要的样式。如：@JsonFormat(pattern=“yyyy-MM-dd hh:mm:ss”)

    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date userbirth;

我们在servlet类内获取当前系统时间：

        users.setUserbirth(new Date());

在这里插入图片描述
后面的数字即为没有使用注解之前的系统时间

这个是使用注解之后的效果

Jackson工具类的使用

我们自己搭建一个Jackson工具类：

package com.bjsxt.common;

import java.util.List;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * JSON转换工具类
 */
public class JsonUtils {

    // 定义jackson对象
    private static final ObjectMapper MAPPER = new ObjectMapper();

    /**
     * 将对象转换成json字符串。
     * <p>Title: pojoToJson</p>
     * <p>Description: </p>
     * @param data
     * @return
     */
    public static String objectToJson(Object data) {
        try {
            String string = MAPPER.writeValueAsString(data);
            return string;
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 将json结果集转化为对象
     *
     * @param jsonData json数据
     * @param clazz 对象中的object类型
     * @return
     */
    public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {
        try {
            T t = MAPPER.readValue(jsonData, beanType);
            return t;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 将json数据转换成pojo对象list
     * <p>Title: jsonToList</p>
     * <p>Description: </p>
     * @param jsonData
     * @param beanType
     * @return
     */
    public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {
        JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);
        try {
            List<T> list = MAPPER.readValue(jsonData, javaType);
            return list;
        } catch (Exception e) {
            e.printStackTrace();
        }

        return null;
    }

}

工具类介绍：
jackson.objectToJson：将对象转换成json字符串
jackson.jsonToPojo：将json结果集转化为对象
jackson.jsonToList：将json数据转换成pojo对象list

使用Jackson工具类：

我们基于注解的servlet类进行测试：

package com.bjsxt.servlet;

import com.bjsxt.common.JsonUtils;
import com.bjsxt.pojo.Users;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * Jackson常用注解的使用
 */
@WebServlet("/ann.do")
public class AnnotationServlet  extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Users users = new Users();
        users.setUserid(1);
        users.setUsername("oldlu");
        ObjectMapper objectMapper = new ObjectMapper();
//        String string = objectMapper.writeValueAsString(users);
//        System.out.println(string);
        String string  = JsonUtils.objectToJson(users);
        System.out.println(string);

        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print("Jackson Annotation");
        pw.flush();
        pw.close();
    }
}

在这里插入图片描述

这样，就成功使用了我们自建的Jackson工具类

Jquery 的 Ajax 使用

在 JQuery 中提供了很多的基于 Ajax 发送异步请求的方法，如： $. a j a x () 、$ .get()、 $. p o s t () 、$ .getJSON()。

$.ajax()

$ajax({name:value,name:value......}) 在$ .ajax()方法中通过 data 属性来存放提交的数据，支持 JSON 格式的数据。

创建一个jsp文件

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/9 0009
  Time: 21:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入需要的jquery的js文件--%>
    <script src="js/jquery.js"></script>
    <script>
        function but(){
            //使用$.ajax去发送一个异步请求
            $.ajax({
                type:"get",
                url:"jqueryAjax.do",
                success:function(result){
                    $("#span").html(result);
                }
            });
        }
    </script>
</head>
<body>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

创建一个servlet类：

/**
 * 基于Jquery的$.ajax方法发送异步请求
 */
@WebServlet("/jqueryAjax.do")
public class JqueryAjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        PrintWriter pw = resp.getWriter();
        pw.print("Hello Jquery Ajax");
        pw.flush();
        pw.close();
    }
}

点击前
在这里插入图片描述
点击后：

$.ajax()在异步请求中提交数据

在$.ajax()方法中通过 data 属性来存放提交的数据，支持 JSON 格式的数据。

提交普通格式的数据

在 data 属性中我们可以通过两种方式来指定需要提交的数据。一种是通过 name=value&name=value 的结构。另一种是通过 JavaScript 对象来指定提交数据。无论使用哪种方式在 Servlet 中都是通过 request.getParameter 方法根据 name 获取 value 。

通过标准格式指定提交数据

data:”name=value&name=value…”
在 Servlet 中通过 request.getParameter 来获取提交的数据
创建一个jsp页面

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/9 0009
  Time: 21:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.ajax({
                type:"get",
                url:"data.do",
                data:"id="+userid+"&name="+username,
                success:function(result){
                    $("#span").html(result);
                }
            });
        }
    </script>
</head>
<body>
用户ID：<input type="text" id="userid"/><br/>
用户姓名：<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

创建一个servlet类

package com.bjsxt.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * 在$.ajax()方法中提交数据
 */
@WebServlet("/data.do")
public class DataServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userid = req.getParameter("id");
        String username = req.getParameter("name");
        PrintWriter pw = resp.getWriter();
        pw.print(userid+" "+username);
        pw.flush();
        pw.close();
    }
}

在这里插入图片描述

通过 JavaScript 对象指定提交数据

在 Servlet 中通过 request.getParameter 来获取提交的数据。

            $.ajax({
                type:"get",
                url:"data.do",
                data:{
                    id:userid,
                    name:username
                },
                success:function(result){
                    $("#span").html(result);
                }
            });

提交 JSON 格式数据

在$.ajax()中提交 JSON 格式的数据需要使用 post 方式提交，通过 JSON.stringify()函数将 JavaScript 对象转换成 JSON 格式的字符串。在 Servlet 中通过字符输入获取提交的 JSON 格式的数据。

data:JSON.stringify({name:value,name:value…})
在 Servlet 中通过 req.getReader().readLine()来获取提交的数据。

jsp文件：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/9 0009
  Time: 22:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.ajax({
                type:"post",
                url:"jsonData.do",
                data:JSON.stringify({
                    id:userid,
                    name:username
                }),
                success:function(result){
                    $("#span").html(result);
                }
            });
        }
    </script>
</head>
<body>
用户ID：<input type="text" id="userid"/><br/>
用户姓名：<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

servlet类：

package com.bjsxt.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * 在$.ajax方法中提交JSON格式的数据
 */
@WebServlet("/jsonData.do")
public class JsonDataServlet extends HttpServlet { 

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         String s = req.getReader().readLine();
        PrintWriter pw = resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
    
}

在这里插入图片描述

$.ajax()处理响应中的 JSON 格式数据(使用比较方便)

$.ajax()方法会根据 dataType 属性中的值自动对响应的数据做类型处理。如果响应的是一个 JSON 格式的数据，那么 dataType 的值为“JSON”,在回调函数中我们得到的直接就是JSON 字符串转换完的 JavaScript 对象。不需要在使用 JSON.parse()做格式的转换处理。

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/9 0009
  Time: 22:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.ajax({
                type:"post",
                url:"jsonConvert.do",
                dataType:"json",
                data:JSON.stringify({
                    id:userid,
                    name:username
                }),
                success:function(result){
                    alert(result.id+" "+result.name);
                    $("#span").html(result.id+" "+result.name);
                }
            });
        }
    </script>
</head>
<body>
用户ID：<input type="text" id="userid"/><br/>
用户姓名：<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

servlet类

/**
 * 提交JSON格式数据在页面中自动转换类型
 */
@WebServlet("/jsonConvert.do")
public class JsonConvertServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置响应类型，为一个Json格式的数据
        resp.setContentType("application/json");
        String s = req.getReader().readLine();
        PrintWriter pw = resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
}

在这里插入图片描述

$.get()的使用

$. g e t () 方法是$ .ajax()方法基于 get 方式发送异步请求的简化版。

语法

$.get(url,function(result))
$.get(url,data,function(result))

通过标准格式指定提交数据

也就是 $.get(url,function(result))

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/9 0009
  Time: 22:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.get("data.do","id="+userid+"&name="+username,function(result){
                     $("#span").html(result);
             });
        }
    </script>
</head>
<body>
用户ID：<input type="text" id="userid"/><br/>
用户姓名：<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

使用之前的DataServlet类：

/**
 * 在$.ajax()方法中提交数据
 */
@WebServlet("/data.do")
public class DataServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userid = req.getParameter("id");
        String username = req.getParameter("name");
        PrintWriter pw = resp.getWriter();
        pw.print(userid+" "+username);
        pw.flush();
        pw.close();
    }
}

在这里插入图片描述

通过标准格式指定提交数据

$.get(url,data,function(result))

在jsp内进行修改

        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val(); 
            $.get("data.do",{id:userid, name:username},function(result){
                $("#span").html(result);
            });
        }

$.post()的使用

$. p o s t () 方法是$ .ajax()方法基于 post 方式发送异步请求的简化版

语法结构

$.post(url,function(result))
$.post(url,data,function(result))

通过标准格式指定提交数据

$.post(url,function(result))

    <script>
        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val();
             $.post("data.do","id="+userid+"&name="+username,function(result){
                     $("#span").html(result);
             });
        }
    </script>

通过 JavaScript 对象指定提交数据

$.post(url,data,function(result))

    <script>
        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val();
 
            $.post("data.do",{id:userid, name:username},function(result){
                $("#span").html(result);
            });
        }

在这里插入图片描述

$.getJSON()的使用

$. g e t J S O N () 方法是$ .ajax()方法基于 get 方式发送异步请求，并将响应结果中 JSON 格式的字符串对象自动转换为 JavaScript 对象。在使用该方法时要求返回的数据必须是 JSON 格式类型。$.getJSON()方法和 resp.setContentType(“application/json”)是一起使用的

语法结构

$.getJSON(url,function(result))
$.getJSON(url,data,function(result))

通过标准格式指定提交数据

$.getJSON(url,function(result))
要求返回的数据格式必须是 JSON 格式

<head>
        <title>Title</title>
        <script src="js/jquery.js"></script>
        <script>
            function but(){
                var userid = $("#userid").val();
                var username = $("#username").val();
                $.getJSON("getJson.do","id="+userid+"& name="+username,function(result){
                    alert(result.userid+" "+result.username);
                    $("#span").html(result.userid+" "+result.username);
                });
            }
        </script>
    </head>
<body>
用户ID：<input type="text" id="userid"/><br/>
用户姓名：<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

package com.bjsxt.servlet;

import com.bjsxt.common.JsonUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

/**
 * getJSON方法传递数据并返回JSON格式数据
 */
@WebServlet("/getJson.do")
public class GetJSONServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userid = req.getParameter("id");
        String username = req.getParameter("name");
        //此处为了避免对于user类的修改，使用map对元素进行存放
        Map<String,String> map = new HashMap<>();
        map.put("userid",userid);
        map.put("username",username);
        String s = JsonUtils.objectToJson(map);
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
}

在这里插入图片描述

通过 JavaScript 对象指定提交数据

$.getJSON(url,data,function(result))
要求返回的数据格式必须是 JSON 格式

        <script>
            function but(){
                var userid = $("#userid").val();
                var username = $("#username").val();
                $.getJSON("getJson.do",{id:userid, name:username},function(result){
                    alert(result.userid+" "+result.username);
                    $("#span").html(result.userid+" "+result.username);
                });
            }
        </script>

serialize()方法的使用（自动拼接用户输入的内容）

将 form 表单中的数据自动拼接成 name=value&name=value 结构

语法结构

var param = $(“form”).serialize();
param 的值为：name=value&name=value

<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        function but(){
           var param = $("#form").serialize();
           alert(param);
            $.ajax({
                type:"get",
                url:"data.do",
                data:param,
                success:function(result){
                    $("#span").html(result);
                }
            });
        }
    </script>
</head>
<body>
<form id="form">
    用户ID：<input type="text" name="id" id="userid"/><br/>
    用户姓名：<input type="text" name="name" id="username"/><br/>
</form>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

使用的还是之前的DataServlet类
在这里插入图片描述

这个ID没什么特点

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax（一：基础）

Ajax基础什么是AjaxAjax怎么用1. XMLHttpRequest对象2. Ajax 的使用步骤JSON详解Jquery的Ajax使用什么是Ajax是指一种创建交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。页面内的某些内容，在后台进行变化后，页面会闪烁。使用Ajax之后，页面上的内容在Ajax执行刷新操作之前，是不会改变的，可以提升用户的体验感。Ajax怎么用1. XMLHttpRequest对象XMLHttpRequest 是浏览器
复制链接

扫一扫