Ajax技术实战

主要内容
Ajax 简介
Ajax 的使用
JSON 详解
Jquery 的 Ajax 使用
Ajax 实战案例

一、 Ajax 简介

在这里插入图片描述
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。
在这里插入图片描述

二、Ajax的使用

1 XMLHttpRequest对象

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

2 Ajax 的使用步骤

1. 创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

2. 给定请求方式以及请求地址

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

3. 发送请求

xhr.send();

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

xhr.onreadystatechange = function(){
    
     
//0:open()没有被调用 
//1:open()正在被调用 
//2:send()正在被调用
//3:服务端正在返回结果 
//4:请求结束，并且服务端已经结束发送数据到客户端
  if(xhr.readyState == 4 && xhr.status == 200){
    
     
  document.getElementById("span").innerHTML=xhr.responseText;
  alert(xhr.responseText); 
  }
}

3 Ajax 的运行原理

在这里插入图片描述

三、 JSON 详解

在这里插入图片描述

1 JSON简介

JSON（JavaScript Object Notation）是一种基于字符串的轻量级的数据交换格式，易于人阅读和编写，同时也易于机器编译和生成，JSON是JavaScript数据类型的子集。

2 为什么要使用JSON

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

3 JSON 格式的特征

在这里插入图片描述

3.1JSON 的语法规则

JSON 是按照特定的语法规则所生成的字符串结构。

大括号表示 JSON 的字符串对象。{ }
属性和值用冒号分割。{"属性":"value"}
属性和属性之间用逗号分割。{"属性":"value","属性":"value",...}
中括号表示数组。[{"属性":"value"...},{"属性":"value"...}]

JSON字符串对象：
在这里插入图片描述
数组：

3.2JOSN 的 6 种数据类型

在这里插入图片描述

string：字符串，必须要用双引号引起来。
number：数值，与 JavaScript 的 number 一致，
object：JavaScript 的对象形式，{ key:value }表示方式，可嵌套。
array：数组，JavaScript 的 Array 表示方式[ value ]，可嵌套。
true/false：布尔类型，JavaScript 的 boolean 类型。
null：空值，JavaScript 的 null。

4 Jackson的使用

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

Gson: 谷歌开发的 JSON 库，功能十分全面。

FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。

Jackson: 社区十分活跃且更新速度很快。被称为“最好的 Json 解析器”

4.1Jackson 简介

Jackson 是一种解析 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

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

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

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

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

需求：

定义一个 Users 类，包含 userid、username 属性。

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

将 Users 对象中的数据插入到页面中。
在这里插入图片描述
添加 Users实体

package com.bjsxt.pojo;

import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.annotation.JsonProperty;

import java.util.Date;

public class Users {
    
    
    @JsonIgnore
    private int userid;

    @JsonIgnore
    @JsonProperty("name")
    private String username;

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

    public Date getUserbirth() {
    
    
        return userbirth;
    }

    public void setUserbirth(Date userbirth) {
    
    
        this.userbirth = userbirth;
    }

    public int getUserid() {
    
    
        return userid;
    }

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

    public String getUsername() {
    
    
        return username;
    }

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

添加SingleObjectServlet

/**
 * 通过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");

        //使用jackson的API将Users对象转换为JSON格式的字符串对象
        ObjectMapper objectMapper = new ObjectMapper();
        //将Users对象转换为JSON格式的字符串对象
        String string = objectMapper.writeValueAsString(users);
        System.out.println(string);
        //设置响应类型为application/json
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(string);
        pw.flush();
        pw.close();
    }
}

创建页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <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>

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

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

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;

/**
 * 通过JSON格式响应多个对象
 */
@WebServlet("/multiple.do")
public class MultipleObjectServlet extends HttpServlet {
    
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        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();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <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>

4.2.3 在 JSON 中通过 Map 传递数据

在JSON格式中可以直接使用Map作为传递数据的模型。因为Map结构本身就是key与value的结构与JSON格式对象模型完全匹配，所以我们可以直接将一个Map对象转换为JSON格式的字符串对象。这对于我们来说是一件非常方便的事情，如果我们返回的数据并没有对应的模型来存放数据，那么我们可以通过Map来解决。

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);
        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();
    }
}

<%@ 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>

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

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

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

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

<%@ 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};
           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>

/**
 * 在请求中通过JSON格式传递数据
 */
@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();
    }
}

4.4Jackson 的常用注解

4.4.1 @JsonProperty

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

4.4.2 @JsonIgnore

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

4.4.3 @JsonFormat

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

/**
 * 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");
        users.setUserbirth(new Date());
       /* ObjectMapper objectMapper = new ObjectMapper();
        String string = objectMapper.writeValueAsString(users);*/
        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();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</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>

修改实体类

 	@JsonIgnore
    private int userid;

    @JsonIgnore
    @JsonProperty("name")
    private String username;

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

4.5Jackson工具类的使用

/**
* 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 beanType 对象中的 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;
      } 
}

四、jQuery的Ajax使用

在这里插入图片描述

在jQuery中提供了Ajax的封装，让我们在使用Ajax技术时变得更加容易。在jQuery中提供了很多的基于Ajax发送异步请求的方法，如：：$ .ajax()、$ .get()、$ .post()、$.getJSON()。

1 $.ajax()的使用

1.1语法结构

$.ajax({name:value,name:value......})
在这里插入图片描述

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        function but(){
    
    
            $.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>

/**
 * 基于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();
    }
}

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

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

1.2.1提交普通格式数据

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

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

data:”name=value&name=value.....”
在 Servlet 中通过 request.getParameter 来获取提交的数据。

1.2.1.2 通过 JavaScript 对象指定提交数据

  data:{
  userid:100, 
  username:”oldlu” 
  }

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

<%@ 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,
              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>

/**
 * 在$.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();
    }
}

1.2.2 提交JSON格式数据

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

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

<%@ 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:"id="+userid+"&name="+username,
                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>

/**
 * 在$.ajax方法中提交JSON格式的数据
 */
@WebServlet("/jsonData.do")
public class JsonDataServlet extends HttpServlet {
    
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        String userid = req.getParameter("id");
        String username = req.getParameter("name");
        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();
    }

    @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();
    }
}

1.3 $.ajax()处理响应中的 JSON 格式数据

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

<%@ 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:"id="+userid+"&name="+username,
                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>

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

2 $.get()的使用

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

2.1语法结构

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

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

$.get(url,”name=value&name=value”,function(result))

2.3通过 JavaScript 对象指定提交数据

$.get(url,{userid:1,username:”oldlu”,......},function(result))

<%@ 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);
            });*/
            $.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>

3 $ .post()的使用

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

3.1语法结构

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

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

$.post(url,”name=value&name=value”,function(result))

3.3通过 JavaScript 对象指定提交数据

$.post(url,{userid:1,username:”oldlu”,......},function(result))

<%@ 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();
             /*$.post("data.do","id="+userid+"&name="+username,function(result){
                     $("#span").html(result);
             });*/
            $.post("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>

4 $ .getJSON()的使用

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

4.1语法结构

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

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

$.getJSON(url,”name=value&name=value”,function(result))
要求返回的数据格式必须是 JSON 格式。

4.3通过 JavaScript 对象指定提交数据

$.getJSON(url,{userid:1,username:”oldlu”,......},function(result))
要求返回的数据格式必须是 JSON 格式。

<%@ 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();
                $.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>

/**
 * 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");
        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();
    }
}

5 serialize()方法的使用

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

5.1语法结构

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<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>

五、 Ajax 实战案例

需求:
创建 User 类，包含 uesrid、username、usersex、userbirth 属性。
在用户管理页面中通过 Ajax 技术完成对用户数据载入、添加用户、更新用户、删除用户操作。

1 搭建环境

1.1创建 User 类

public class User {
    
    
    private int userid;
    private String username;
    private String usersex;
    @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
    private Date userbirth;

    public int getUserid() {
    
    
        return userid;
    }

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

    public String getUsername() {
    
    
        return username;
    }

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

    public String getUsersex() {
    
    
        return usersex;
    }

    public void setUsersex(String usersex) {
    
    
        this.usersex = usersex;
    }

    public Date getUserbirth() {
    
    
        return userbirth;
    }

    public void setUserbirth(Date userbirth) {
    
    
        this.userbirth = userbirth;
    }
}

1.2在页面中创建表格

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <script src="js/jquery.js"></script>
    
</head>
<body>
<table align="center" width="60%" border="1">
    <tr>
        <td>ID：</td>
        <td><input type="text" name="userid" id="userid"/></td>
        <td>姓名：</td>
        <td><input type="text" name="username" id="username"/></td>
    </tr>
    <tr>
        <td>性别：</td>
        <td><input type="text" name="usersex" id="usersex"/></td>
        <td>生日：</td>
        <td><input type="text" name="userbirth" id="userbirth"/></td>
    </tr>
    <tr align="center">
        <td colspan="4">
            <input type="button"  value="添加用户" id="add" />
            <input type="button"  value="更新用户" id="update"/>
        </td>
    </tr>
</table>
<hr/>
<table align="center" width="60%" bgcolor="" border="1" id="myTable">
    <thead>
    <tr align="center">
        <td>ID</td>
        <td>姓名</td>
        <td>性别</td>
        <td>生日</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody id="tBody"></tbody>
</table>
</body>
</html>

在这里插入图片描述

2 加载用户数据

2.1通过 Ajax 完成页面数据初始化

<script>
        $(function () {
      
      
            //获取页面初始化数据
            getData();
            //添加按钮绑定点击事件
            $("#add").click(function(){
      
      
                addOrUpdateUser("addUser");
            });
            //更新按钮绑定点击事件
            $("#update").click(function(){
      
      
                addOrUpdateUser("updateUser");
            });
        });
        //获取页面初始化数据
        function getData(){
      
      
            $.getJSON("user.do",{
      
      flag:"getData"},function (result) {
      
      
                init(result);
            });
        }
        //遍历数据生成数据
        function init(obj){
      
      
            var str ="";
            $.each(obj,function(){
      
      
                str+= "<tr align='center'><td id='"+this.userid+"'>"+this.userid +"</td><td>"+this.username+"</td><td>"+this.usersex+"</td><td>"+this.userbirth+"</td><td><a href='#' οnclick='preUpdateUser("+this.userid+")'>选择更新</a>&nbsp;&nbsp;&nbsp;<a href='#' οnclick='deleteUser("+this.userid+")'>删除</a></td></tr>"
            });
            $("#tBody").prepend(str);
        }
</script>

2.2创建 Servlet 处理页面数据初始化请求

/**
 * 用户管理Servlet
 */
@WebServlet("/user.do")
public class UserServlet extends HttpServlet {
    
    
    //生成模拟数据初始化
    @Override
    public void init() throws ServletException {
    
    
        User user = new User();
        user.setUserid(1);
        user.setUsername("Oldlu");
        user.setUsersex("male");
        user.setUserbirth(new Date());
        User user2 = new User();
        user2.setUserid(2);
        user2.setUsername("Kevin");
        user2.setUsersex("male");
        user2.setUserbirth(new Date());
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user2);
        ServletContext servletContext = this.getServletContext();
        servletContext.setAttribute("list",list);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
            String flag = req.getParameter("flag");
            if("getData".equals(flag)){
    
    
                this.getData(req,resp);
            }else if("addUser".equals(flag)){
    
    
                this.addUser(req,resp);
            }else if("updateUser".equals(flag)){
    
    
                this.updateUser(req,resp);
            }else{
    
    
                this.deleteUser(req,resp);
            }
    }

    //获取页面初始化数据
    private void getData(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        List<User> list = (List<User>) this.getServletContext().getAttribute("list");
        String s = JsonUtils.objectToJson(list);
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
}

3 添加用户操作

3.1通过 Ajax 完成添加用户

<script>
        $(function () {
      
      
            //获取页面初始化数据
            getData();
            //添加按钮绑定点击事件
            $("#add").click(function(){
      
      
                addOrUpdateUser("addUser");
            });
            //更新按钮绑定点击事件
            $("#update").click(function(){
      
      
                addOrUpdateUser("updateUser");
            });
        });
        //获取页面初始化数据
        function getData(){
      
      
            $.getJSON("user.do",{
      
      flag:"getData"},function (result) {
      
      
                init(result);
            });
        }
        //遍历数据生成数据
        function init(obj){
      
      
            var str ="";
            $.each(obj,function(){
      
      
                str+= "<tr align='center'><td id='"+this.userid+"'>"+this.userid +"</td><td>"+this.username+"</td><td>"+this.usersex+"</td><td>"+this.userbirth+"</td><td><a href='#' οnclick='preUpdateUser("+this.userid+")'>选择更新</a>&nbsp;&nbsp;&nbsp;<a href='#' οnclick='deleteUser("+this.userid+")'>删除</a></td></tr>"
            });
            $("#tBody").prepend(str);
        }
        //用户添加或者用户更新
        function addOrUpdateUser(flag){
      
      
            //从页面中获取数据
            var userid = $("#userid").val();
            var username = $("#username").val();
            var usersex = $("#usersex").val();
            var userbirth = $("#userbirth").val();

            var data = {
      
      
                userid:userid,
                username:username,
                usersex:usersex,
                userbirth:userbirth,
                flag:flag
            }
            $.get("user.do",data,function(result){
      
      
                alert(result);
            });
            location.reload();
        }
    
    </script>

3.2在 Servlet 中处理添加用户请求

Servlet 代码

/**
 * 用户管理Servlet
 */
@WebServlet("/user.do")
public class UserServlet extends HttpServlet {
    
    
    //生成模拟数据初始化
    @Override
    public void init() throws ServletException {
    
    
        User user = new User();
        user.setUserid(1);
        user.setUsername("Oldlu");
        user.setUsersex("male");
        user.setUserbirth(new Date());
        User user2 = new User();
        user2.setUserid(2);
        user2.setUsername("Kevin");
        user2.setUsersex("male");
        user2.setUserbirth(new Date());
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user2);
        ServletContext servletContext = this.getServletContext();
        servletContext.setAttribute("list",list);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
            String flag = req.getParameter("flag");
            if("getData".equals(flag)){
    
    
                this.getData(req,resp);
            }else if("addUser".equals(flag)){
    
    
                this.addUser(req,resp);
            }else if("updateUser".equals(flag)){
    
    
                this.updateUser(req,resp);
            }else{
    
    
                this.deleteUser(req,resp);
            }
    }

    //获取页面初始化数据
    private void getData(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        List<User> list = (List<User>) this.getServletContext().getAttribute("list");
        String s = JsonUtils.objectToJson(list);
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
    //处理添加用户请求
    private void addUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
            User user = this.createUser(req);
            ServletContext servletContext = this.getServletContext();
            List<User> list = (List<User>) servletContext.getAttribute("list");
            list.add(user);
            resp.setContentType("text/plain;charset=utf-8");
            PrintWriter pw = resp.getWriter();
            pw.print("添加成功");
            pw.flush();
            pw.close();
    }
    //获取请求数据
    private User createUser(HttpServletRequest req){
    
    
        String userid = req.getParameter("userid");
        String username = req.getParameter("username");
        String usersex = req.getParameter("usersex");
        String userbirth  = req.getParameter("userbirth");

        User user  = new User();
        user.setUserid(Integer.parseInt(userid));
        user.setUsername(username);
        user.setUsersex(usersex);
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        try {
    
    
            Date parse = sdf.parse(userbirth);
            user.setUserbirth(parse);
        } catch (ParseException e) {
    
    
            e.printStackTrace();
        }
        return user;
    }
}

解决时区问题

@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")

4 更新用户操作

4.1通过 Ajax 完成预更新用户选择

<script>
        $(function () {
      
      
            //获取页面初始化数据
            getData();
            //添加按钮绑定点击事件
            $("#add").click(function(){
      
      
                addOrUpdateUser("addUser");
            });
        });
        //获取页面初始化数据
        function getData(){
      
      
            $.getJSON("user.do",{
      
      flag:"getData"},function (result) {
      
      
                init(result);
            });
        }
        //遍历数据生成数据
        function init(obj){
      
      
            var str ="";
            $.each(obj,function(){
      
      
                str+= "<tr align='center'><td id='"+this.userid+"'>"+this.userid +"</td><td>"+this.username+"</td><td>"+this.usersex+"</td><td>"+this.userbirth+"</td><td><a href='#' οnclick='preUpdateUser("+this.userid+")'>选择更新</a>&nbsp;&nbsp;&nbsp;<a href='#' οnclick='deleteUser("+this.userid+")'>删除</a></td></tr>"
            });
            $("#tBody").prepend(str);
        }
        //用户添加或者用户更新
        function addOrUpdateUser(flag){
      
      
            //从页面中获取数据
            var userid = $("#userid").val();
            var username = $("#username").val();
            var usersex = $("#usersex").val();
            var userbirth = $("#userbirth").val();

            var data = {
      
      
                userid:userid,
                username:username,
                usersex:usersex,
                userbirth:userbirth,
                flag:flag
            }
            $.get("user.do",data,function(result){
      
      
                alert(result);
            });
            location.reload();
        }
        //更新之前的数据选择
        function preUpdateUser(userid){
      
      
            var arr = new Array();
            $("#"+userid).closest("tr").children().each(function(index,ele){
      
      
                if(index <=3){
      
      
                  arr[index]= ele.innerText
                }
            });
            $("#userid").val(arr[0]);
            $("#username").val(arr[1]);
            $("#usersex").val(arr[2]);
            $("#userbirth").val(arr[3]);
            $("#userid").attr("readonly",true);
        }
 
    </script>

4.2通过 Ajax 完成更新用户

<script>
        $(function () {
      
      
            //获取页面初始化数据
            getData();
            //添加按钮绑定点击事件
            $("#add").click(function(){
      
      
                addOrUpdateUser("addUser");
            });
            //更新按钮绑定点击事件
            $("#update").click(function(){
      
      
                addOrUpdateUser("updateUser");
            });
        });
        //获取页面初始化数据
        function getData(){
      
      
            $.getJSON("user.do",{
      
      flag:"getData"},function (result) {
      
      
                init(result);
            });
        }
        //遍历数据生成数据
        function init(obj){
      
      
            var str ="";
            $.each(obj,function(){
      
      
                str+= "<tr align='center'><td id='"+this.userid+"'>"+this.userid +"</td><td>"+this.username+"</td><td>"+this.usersex+"</td><td>"+this.userbirth+"</td><td><a href='#' οnclick='preUpdateUser("+this.userid+")'>选择更新</a>&nbsp;&nbsp;&nbsp;<a href='#' οnclick='deleteUser("+this.userid+")'>删除</a></td></tr>"
            });
            $("#tBody").prepend(str);
        }
        //用户添加或者用户更新
        function addOrUpdateUser(flag){
      
      
            //从页面中获取数据
            var userid = $("#userid").val();
            var username = $("#username").val();
            var usersex = $("#usersex").val();
            var userbirth = $("#userbirth").val();

            var data = {
      
      
                userid:userid,
                username:username,
                usersex:usersex,
                userbirth:userbirth,
                flag:flag
            }
            $.get("user.do",data,function(result){
      
      
                alert(result);
            });
            location.reload();
        }
        //更新之前的数据选择
        function preUpdateUser(userid){
      
      
            var arr = new Array();
            $("#"+userid).closest("tr").children().each(function(index,ele){
      
      
                if(index <=3){
      
      
                  arr[index]= ele.innerText
                }
            });
            $("#userid").val(arr[0]);
            $("#username").val(arr[1]);
            $("#usersex").val(arr[2]);
            $("#userbirth").val(arr[3]);
            $("#userid").attr("readonly",true);
        }
 
    </script>

4.3在 Servlet 中处理更新用户请求

/**
 * 用户管理Servlet
 */
@WebServlet("/user.do")
public class UserServlet extends HttpServlet {
    
    
    //生成模拟数据初始化
    @Override
    public void init() throws ServletException {
    
    
        User user = new User();
        user.setUserid(1);
        user.setUsername("Oldlu");
        user.setUsersex("male");
        user.setUserbirth(new Date());
        User user2 = new User();
        user2.setUserid(2);
        user2.setUsername("Kevin");
        user2.setUsersex("male");
        user2.setUserbirth(new Date());
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user2);
        ServletContext servletContext = this.getServletContext();
        servletContext.setAttribute("list",list);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
            String flag = req.getParameter("flag");
            if("getData".equals(flag)){
    
    
                this.getData(req,resp);
            }else if("addUser".equals(flag)){
    
    
                this.addUser(req,resp);
            }else if("updateUser".equals(flag)){
    
    
                this.updateUser(req,resp);
            }else{
    
    
                this.deleteUser(req,resp);
            }
    }

    //获取页面初始化数据
    private void getData(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        List<User> list = (List<User>) this.getServletContext().getAttribute("list");
        String s = JsonUtils.objectToJson(list);
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
    //处理添加用户请求
    private void addUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
            User user = this.createUser(req);
            ServletContext servletContext = this.getServletContext();
            List<User> list = (List<User>) servletContext.getAttribute("list");
            list.add(user);
            resp.setContentType("text/plain;charset=utf-8");
            PrintWriter pw = resp.getWriter();
            pw.print("添加成功");
            pw.flush();
            pw.close();
    }
    //获取请求数据
    private User createUser(HttpServletRequest req){
    
    
        String userid = req.getParameter("userid");
        String username = req.getParameter("username");
        String usersex = req.getParameter("usersex");
        String userbirth  = req.getParameter("userbirth");

        User user  = new User();
        user.setUserid(Integer.parseInt(userid));
        user.setUsername(username);
        user.setUsersex(usersex);
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        try {
    
    
            Date parse = sdf.parse(userbirth);
            user.setUserbirth(parse);
        } catch (ParseException e) {
    
    
            e.printStackTrace();
        }
        return user;
    }

    //处理更新用户请求
    private void updateUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
    
    
        User user = this.createUser(req);
        ServletContext servletContext = this.getServletContext();
        List<User> list = (List<User>) servletContext.getAttribute("list");
        User u = null;
        for(User temp : list){
    
    
            if(temp.getUserid() == user.getUserid()){
    
    
                u = temp;
                break;
            }
        }
        if(u != null){
    
    
            list.remove(u);
        }
        list.add(user);
        resp.setContentType("text/plain;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.print("更新成功");
        pw.flush();
        pw.close();
    }

}

5 删除用户操作

5.1通过 Ajax 完成删除用户

 <script>
        $(function () {
      
      
            //获取页面初始化数据
            getData();
            //添加按钮绑定点击事件
            $("#add").click(function(){
      
      
                addOrUpdateUser("addUser");
            });
            //更新按钮绑定点击事件
            $("#update").click(function(){
      
      
                addOrUpdateUser("updateUser");
            });
        });
        //获取页面初始化数据
        function getData(){
      
      
            $.getJSON("user.do",{
      
      flag:"getData"},function (result) {
      
      
                init(result);
            });
        }
        //遍历数据生成数据
        function init(obj){
      
      
            var str ="";
            $.each(obj,function(){
      
      
                str+= "<tr align='center'><td id='"+this.userid+"'>"+this.userid +"</td><td>"+this.username+"</td><td>"+this.usersex+"</td><td>"+this.userbirth+"</td><td><a href='#' οnclick='preUpdateUser("+this.userid+")'>选择更新</a>&nbsp;&nbsp;&nbsp;<a href='#' οnclick='deleteUser("+this.userid+")'>删除</a></td></tr>"
            });
            $("#tBody").prepend(str);
        }
        //用户添加或者用户更新
        function addOrUpdateUser(flag){
      
      
            //从页面中获取数据
            var userid = $("#userid").val();
            var username = $("#username").val();
            var usersex = $("#usersex").val();
            var userbirth = $("#userbirth").val();

            var data = {
      
      
                userid:userid,
                username:username,
                usersex:usersex,
                userbirth:userbirth,
                flag:flag
            }
            $.get("user.do",data,function(result){
      
      
                alert(result);
            });
            location.reload();
        }
        //更新之前的数据选择
        function preUpdateUser(userid){
      
      
            var arr = new Array();
            $("#"+userid).closest("tr").children().each(function(index,ele){
      
      
                if(index <=3){
      
      
                  arr[index]= ele.innerText
                }
            });
            $("#userid").val(arr[0]);
            $("#username").val(arr[1]);
            $("#usersex").val(arr[2]);
            $("#userbirth").val(arr[3]);
            $("#userid").attr("readonly",true);
        }
        //删除用户
        function deleteUser(userid){
      
      
            $("#"+userid).closest("tr").remove();
            $.get("user.do",{
      
      userid:userid},function(result){
      
      
                alert(result);
            })
        }
    </script>

5.2在 Servlet 处理删除用户请求

/**
 * 用户管理Servlet
 */
@WebServlet("/user.do")
public class UserServlet extends HttpServlet {
    
    
    //生成模拟数据初始化
    @Override
    public void init() throws ServletException {
    
    
        User user = new User();
        user.setUserid(1);
        user.setUsername("Oldlu");
        user.setUsersex("male");
        user.setUserbirth(new Date());
        User user2 = new User();
        user2.setUserid(2);
        user2.setUsername("Kevin");
        user2.setUsersex("male");
        user2.setUserbirth(new Date());
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user2);
        ServletContext servletContext = this.getServletContext();
        servletContext.setAttribute("list",list);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
            String flag = req.getParameter("flag");
            if("getData".equals(flag)){
    
    
                this.getData(req,resp);
            }else if("addUser".equals(flag)){
    
    
                this.addUser(req,resp);
            }else if("updateUser".equals(flag)){
    
    
                this.updateUser(req,resp);
            }else{
    
    
                this.deleteUser(req,resp);
            }
    }

    //获取页面初始化数据
    private void getData(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        List<User> list = (List<User>) this.getServletContext().getAttribute("list");
        String s = JsonUtils.objectToJson(list);
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
    //处理添加用户请求
    private void addUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
            User user = this.createUser(req);
            ServletContext servletContext = this.getServletContext();
            List<User> list = (List<User>) servletContext.getAttribute("list");
            list.add(user);
            resp.setContentType("text/plain;charset=utf-8");
            PrintWriter pw = resp.getWriter();
            pw.print("添加成功");
            pw.flush();
            pw.close();
    }
    //获取请求数据
    private User createUser(HttpServletRequest req){
    
    
        String userid = req.getParameter("userid");
        String username = req.getParameter("username");
        String usersex = req.getParameter("usersex");
        String userbirth  = req.getParameter("userbirth");

        User user  = new User();
        user.setUserid(Integer.parseInt(userid));
        user.setUsername(username);
        user.setUsersex(usersex);
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        try {
    
    
            Date parse = sdf.parse(userbirth);
            user.setUserbirth(parse);
        } catch (ParseException e) {
    
    
            e.printStackTrace();
        }
        return user;
    }

    //处理更新用户请求
    private void updateUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
    
    
        User user = this.createUser(req);
        ServletContext servletContext = this.getServletContext();
        List<User> list = (List<User>) servletContext.getAttribute("list");
        User u = null;
        for(User temp : list){
    
    
            if(temp.getUserid() == user.getUserid()){
    
    
                u = temp;
                break;
            }
        }
        if(u != null){
    
    
            list.remove(u);
        }
        list.add(user);
        resp.setContentType("text/plain;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.print("更新成功");
        pw.flush();
        pw.close();
    }

    //处理删除用户请求
    private void deleteUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
    
    
        ServletContext servletContext = this.getServletContext();
        List<User> list = (List<User>) servletContext.getAttribute("list");
        String userid = req.getParameter("userid");
        User user = null;
        for(User temp:list){
    
    
            if((temp.getUserid()+"").equals(userid)){
    
    
                user = temp;
                break;
            }
        }
        if(user != null){
    
    
            list.remove(user);
        }
        resp.setContentType("text/plain;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.print("删除成功");
        pw.flush();
        pw.close();
    }
}

MyBatis

JAVAEE和项目开发——Ajax详解

Ajax技术实战

一、 Ajax 简介

二、Ajax的使用

1 XMLHttpRequest对象

2 Ajax 的使用步骤

1. 创建 XMLHttpRequest 对象

2. 给定请求方式以及请求地址

3. 发送请求

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

3 Ajax 的运行原理

三、 JSON 详解

1 JSON简介

2 为什么要使用JSON

3 JSON 格式的特征

3.1JSON 的语法规则

3.2JOSN 的 6 种数据类型

4 Jackson的使用

4.1Jackson 简介

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

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

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

4.2.3 在 JSON 中通过 Map 传递数据

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

4.4Jackson 的常用注解

4.4.1 @JsonProperty

4.4.2 @JsonIgnore

4.4.3 @JsonFormat

4.5Jackson工具类的使用

四、jQuery的Ajax使用

1 $.ajax()的使用

1.1语法结构

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

1.2.1提交普通格式数据

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

1.2.1.2 通过 JavaScript 对象指定提交数据

1.2.2 提交JSON格式数据

1.3 $.ajax()处理响应中的 JSON 格式数据

2 $.get()的使用

2.1语法结构

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

2.3通过 JavaScript 对象指定提交数据

3 $ .post()的使用

3.1语法结构

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

3.3通过 JavaScript 对象指定提交数据

4 $ .getJSON()的使用

4.1语法结构

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

4.3通过 JavaScript 对象指定提交数据

5 serialize()方法的使用

5.1语法结构

五、 Ajax 实战案例

1 搭建环境

1.1创建 User 类

1.2在页面中创建表格

2 加载用户数据

2.1通过 Ajax 完成页面数据初始化

2.2创建 Servlet 处理页面数据初始化请求

3 添加用户操作

3.1通过 Ajax 完成添加用户

3.2在 Servlet 中处理添加用户请求

4 更新用户操作

4.1通过 Ajax 完成预更新用户选择

4.2通过 Ajax 完成更新用户

4.3在 Servlet 中处理更新用户请求

5 删除用户操作

5.1通过 Ajax 完成删除用户

5.2在 Servlet 处理删除用户请求

猜你喜欢