Ajax&Json

AJAX&JSON

资源：https://download.csdn.net/download/weixin_51297617/29227509

一. AJAX的概述 1.1 什么是ajax

异步Javascript和XML (Asynchronous Javascript And XML)

1. 异步的访问方式
2. 使用到的技术：Javascript和XML
   1).  Javascript：ajax是js的异步请求技术
   2).  XML：用于封装服务器发送的大量的数据，因为XML无关的数据太多，而且解析比较麻烦。所以目前几乎不再使用了，使用JSON格式来代替。

1.2 同步和异步的区别

# 同步方式
	1. 浏览器与服务器是串行的操作，浏览器发起请求的时候，服务器在处理该请求的时候，浏览器只能等待。以前使用JSP开发的方式都是同步的方式。
	2. 缺点：执行效率低，用户体验差。	
#异步方式
	1. 浏览器与服务器是并行工作的
	2. 优点：执行效率高，用户体验更好。

AJAX使用异步的提交方式，浏览器与服务器可以并行操作，即浏览器后台发送数据给服务器。用户在前台还是可以继续工作。用户感觉不到浏览器已经将数据发送给了服务器，并且服务器也已经返回了数据。

1.3 AJAX的应用场景 1.3.1 检查用户名是否已被注册

很多站点的注册页面都具备自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器端进行数据交换，查询用户的输入的用户名是否在数据库中已经存在。

1.3.2 内容自动补全

百度的搜索补全功能：

京东的搜索补全功能：

二. 原生ajax的访问流程[了解] 1.1 AJAX的执行流程

流程说明：

用户访问的时候，由Javascript后台创建一个请求对象：XMLHttpRequest对象。
请求对象创建一个回调函数，回调函数用于处理服务器返回的响应
请求对象用于发送请求给服务器
服务器接收到浏览器发过来的请求，并且对数据进行处理。
将数据以XML的格式发送回浏览器，由XMLHttpRequest请求对象的回调函数接收数据
使用HTML和CSS更新网页最新结果

1.2 XMLHttpRequest对象

学习XMLHttpRequest对象有哪些事件，方法和属性

创建XMLHttpRequest对象	说明
new XMLHttpRequest()	构造方法直接创建对象

XMLHttpRequest对象的事件	说明
on ready state change	准备状态改变事件，这个事件是在以下情况激活： 1. 浏览器开始发送数据给服务器的时候 2. 浏览器数据发送完毕的时候 3. 服务器开始发送数据给浏览器的时候 4. 服务器数据发送完毕的时候

XMLHttpRequest对象的属性	说明
readyState	准备状态的值，当它等于4的时候，表示服务器数据接收完毕
status	服务器的状态码。等于200的时候，服务器正确响应
responseText	接收服务器返回的字符串数据

XMLHttpRequest对象的方法	说明
open(“GET”,“URL”,true)	打开服务器的连接 1. GET或POST表示请求的方式 2. URL访问服务器的地址 3. true/false 表示异步，false表示同步。同步是指要等待服务器响应回来以后，才继续向后执行。
send()	发送请求，如果是GET方法send()不需要参数。如果是POST，send()需要传递浏览器端的数据

1.3 案例：使用原生的AJAX

package com.itheima01.ajax;

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;

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {

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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收请求
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        System.out.println(name + "," + age);
        //2. 处理业务
//        int i = 1/0;
        //3. 响应数据
//        response.setHeader("content-type","text/html;charset=utf-8");
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().print("hello");
    }

}




    
    Title

三. Ajax异步请求 axios (重要!) 3.1 axios介绍

原生ajax请求的代码编写太过繁琐,我们可以使用axios这个库来简化操作！

在后续学习的Vue(前端框架)中发送异步请求,使用的就是axios.

需要注意的是axios不是vue的插件,它可以独立使用.

axios(https://www.kancloud.cn/yunye/axios/234845)
使用步骤
1.引入axios核心js文件。
2.调用axios对象的方法来发起异步请求。
3.调用axios对象的方法来处理响应的数据。

axios常用方法

#备注: then函数的参数response是一个json对象,我们重点只需要了解response.data即可
{
    // `data` 由服务器提供的响应 (重要!)
    data: {},

    // `status` 来自服务器响应的 HTTP 状态码
    status: 200,

    // `statusText` 来自服务器响应的 HTTP 状态信息
    statusText: 'OK',

    // `headers` 服务器响应的头
    headers: {},

    // `config` 是为请求提供的配置信息
    config: {}
}

代码实现

html代码




    
    Title

java代码

package com.itheima01.ajax;

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;

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {

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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收请求
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        System.out.println(name + "," + age);
        //2. 处理业务
//        int i = 1/0;
        //3. 响应数据
//        response.setHeader("content-type","text/html;charset=utf-8");
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().print("hello");
    }

}

3.2 检查用户名是否已被注册

#需求: 
	   a. 有一个注册的表单, 有注册用户名和密码,一个提交按钮
	   b. 用户名输完之后,检测这个用户名是否可用
	   c. 就算服务器没有立即响应, 用户还能继续在表单上操作 -> 异步
#分析:
	1. 用户名输入框注册一个失去焦点事件(onblur)
	2. 向服务器发送 异步 请求
	3. 服务器响应之后, 提示信息 局部更新到页面上




    
    Title

package com.itheima01.ajax;

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;

@WebServlet("/CheckServlet")
public class CheckServlet extends HttpServlet {

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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        1). 获取请求参数
        // post中文乱码
        request.setCharacterEncoding("utf-8");
        String username = request.getParameter("username");

        //2). 查询数据库 (伪数据)
        if("jack".equalsIgnoreCase(username)){
            //用户名已存在,不可用
            response.getWriter().print("false");
        }else{
            //用户名不存在,可用
            response.getWriter().print("true");
        }
    }

}

四. JSON 4.1 JSON概述

Javascript对象表示形式（Javascript Object Notation : js对象简谱）

json是一种js对象文本表示形式

json是目前前后端数据交互的主要格式之一

* java对象表示形式
		User user = new User();
			user.setUsername("后羿");
			user.setAge(23);
			user.setSex("男");
			...
			
		Product product = new Product();
			product.setName("小米10");
			product.setDesc("1亿像素的手机小王子");
			
* javascript对象表示形式
		let user ={"username":"后羿","age":23,"sex":"男"}
		let product = {"name":"小米10","desc":"1亿像素的手机小王子"}

json可以取代XML笨重的数据结构，和xml相比：更小、更快，更易解析

json、xml作用：作为数据的载体，在网络中传输

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Pj3Q9B9-1633616549498)(assets/1590628812135.png)]

4.2 JSON基础语法

#json的语法主要有两种:
        1. 对象 { }
        2. 数组 [ ]
        
1. 对象类型
		{name:value,name:value}
		
2. 数组类型
		[
            {name:value,name:value}, 
            {name:value,name:value},
            {name:value,name:value}
		]
		
3. 复杂对象
		{
            name:value,
            wives:[{name:value},{},{}],
            son:{name:value}
		}
#注意: 
	1. 其中name必须是string类型
	2. value必须是以下数据类型之一：
		字符串
		数字
		对象（JSON 对象）
		数组
		布尔
		Null
	3. JSON 中的字符串必须用双引号包围。(单引号不行!)




    
    Title

五. Fastjson 5.1 fastjson引入

需求

在服务器端有如下User对象需要响应给浏览器.

为了方便浏览器解析, 这就要求服务端在响应之前,需要将转成符合Json格式的字符串.

package com.itheima02.json;

public class User {
    private String username;
    private String password;

    public User() {
    }

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + ''' +
                ", password='" + password + ''' +
                '}';
    }
    //TODO: 自己采用字符串拼接的方式输出。
    public String toJson() {
        return "{"username":""+username+"","password":"+password+"}";
    }
    public String getUsername() {
        return username;
    }

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

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

通过拼接字符串的形式,将java对象转换成json格式字符串无疑是非常麻烦的,在开发中我们一般使用转换工具来达到实现.

所谓的转换工具是通过java封装好的一些jar工具包，可以直接将java对象或集合转换成json格式的字符串。

常见的json转换工具

其实这些工具使用起来都差不多, 目前我们学习使用的是Fastjson

5.2 fastjson 常用 API

fastjson 作用:

将java对象(PO)转成json字符串
将json字符串转成 java对象(VO)

常用API

fastjson API 入口类是com.alibaba.fastjson.JSON,常用的序列化操作都可以在JSON类上的静态方法直接完成。

public static final String toJSONString(Object object); // 将JavaBean序列化为JSON文本 

public static final  T parseObject(String text, Class clazz); // 把JSON文本解析成指定类型JavaBean 
public static final  List parseArray(String text, Class clazz); //把JSON文本解析成JavaBean集合

5.3 fastjson 使用实例 5.3.1 导包

  
        
            com.alibaba
            fastjson
            1.2.47

5.3.2 实体类

package com.itheima02.json;

public class User implements Serializable{
    private String username;
    private String password;

    public User() {
    }

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + ''' +
                ", password='" + password + ''' +
                '}';
    }
  
    public String getUsername() {
        return username;
    }

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

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

package com.itheima02.json;

import java.util.ArrayList;
import java.util.List;

public class UserGroup implements Serializable{
    private String name;
    private List users = new ArrayList();

    public UserGroup() {
    }

    public UserGroup(String name, List users) {
        this.name = name;
        this.users = users;
    }

    @Override
    public String toString() {
        return "UserGroup{" +
                "name='" + name + ''' +
                ", users=" + users +
                '}';
    }

    public String getName() {
        return name;
    }

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

    public List getUsers() {
        return users;
    }

    public void setUsers(List users) {
        this.users = users;
    }
}

5.3.3 测试

package com.itheima.test;

import com.alibaba.fastjson.JSON;
import com.itheima02.json.User;
import com.itheima02.json.UserGroup;
import org.junit.Before;
import org.junit.Test;

import java.util.ArrayList;
import java.util.List;

public class FastjsonTest {

    private User user; // 对应 json对象
    private List userList; // 对应 json 数组
    private UserGroup userGroup; // 对应 json 复杂

    private String userJsonString; // json对象字符串 -> User
    private String userListJsonString; // json数组字符串 -> List
    private String userGroupJsonString; // json复杂字符串 -> UserGroup


    @Before
    public void init() {
        user = new User("张三", "123");

        userList = new ArrayList();
        userList.add(new User("刘备", "123"));
        userList.add(new User("关羽", "456"));
        userList.add(new User("张飞", "789"));

        userGroup = new UserGroup();
        userGroup = new UserGroup("userGroups", userList);

        userJsonString = "{'password':'123','username':'张三三'}";
        userListJsonString = "[{'password':'123','username':'刘备'},{'password':'456','username':'关羽'},{'password':'789','username':'张飞'}]";
        userGroupJsonString = "{'name':'userGroups','users':[{'password':'123','username':'刘备'},{'password':'456','username':'关羽'},{'password':'789','username':'张飞'}]}";
    }

    //1. Java对象 -> JSON字符串
    @Test
    public void method01(){
            //核心类: com.alibaba.fastjson.JSON
            //public static final String toJSonString(Object object); // 将JavaBean序列化为JSON文本

        String jsonObj = JSON.toJSONString(user);
        System.out.println(jsonObj);


        String jsonArray = JSON.toJSONString(userList);
        System.out.println(jsonArray);

        String jsonComplex = JSON.toJSONString(userGroup);
        System.out.println(jsonComplex);

    }

    // 2. JSON字符串 -> java对象
    @Test
    public void method02(){
        
        User user = JSON.parseObject(userJsonString, User.class);
        System.out.println(user);

        List users = JSON.parseArray(userListJsonString, User.class);
        System.out.println(users);

        UserGroup group = JSON.parseObject(userGroupJsonString, UserGroup.class);
        System.out.println(group);
    }
}

六. axios和Fastjson综合 6.1 请求参数和响应数据都是普通字符串




    
    Title

package com.itheima03.union.pojo.po;

import java.io.Serializable;


public class Contact implements Serializable {
    private Integer id;
    private String name;
    private boolean married;

    public Contact() {
    }

    public Contact(Integer id, String name, boolean married) {
        this.id = id;
        this.name = name;
        this.married = married;
    }

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

    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 boolean isMarried() {
        return married;
    }

    public void setMarried(boolean married) {
        this.married = married;
    }
}

package com.itheima03.union;

import com.itheima03.union.pojo.po.Contact;

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.util.ArrayList;

@WebServlet("/Union01Servlet")
public class Union01Servlet extends HttpServlet {

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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收请求
        request.setCharacterEncoding("utf-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        System.out.println(username + "," + password);
        //2. 业务处理 (数据库: 伪数据)
        Contact zs = new Contact(1, "张三", true);
        Contact ls = new Contact(2, "李四", false);

        ArrayList list = new ArrayList<>();
        list.add(zs);
        list.add(ls);
        //3. 响应数据

        response.setContentType("text/html;charset=utf-8");
        response.getWriter().print(list.toString());
    }

}

6.2 响应数据改成json格式

响应结果的封装

package com.itheima03.union.pojo.entity;

import java.io.Serializable;

public class Result implements Serializable {
    private boolean flag;//执行结果，true为执行成功 false为执行失败
    private String message;//返回结果信息
    private Object result;//返回数据(如果是查询操作则设置,如果是增删改则不设置)

    public Result() {
    }
    //失败,或者成功的增删改
    public Result(boolean flag, String message){
        this.flag = flag;
        this.message = message;
    }
    //成功的查询
    public Result(boolean flag, String message, Object result) {
        this.flag = flag;
        this.message = message;
        this.result = result;
    }

    public boolean isFlag() {
        return flag;
    }

    public void setFlag(boolean flag) {
        this.flag = flag;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getResult() {
        return result;
    }

    public void setResult(Object result) {
        this.result = result;
    }
}




    
    Title

package com.itheima03.union;

import com.alibaba.fastjson.JSON;
import com.itheima03.union.pojo.entity.Result;
import com.itheima03.union.pojo.po.Contact;

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.util.ArrayList;

@WebServlet("/Union02Servlet")
public class Union02Servlet extends HttpServlet {

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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //1. 接收请求
            request.setCharacterEncoding("utf-8");
            String username = request.getParameter("username");
            String password = request.getParameter("password");

            System.out.println(username + "," + password);
            //2. 业务处理 (数据库: 伪数据)
            Contact zs = new Contact(1, "张三", true);
            Contact ls = new Contact(2, "李四", false);

            ArrayList list = new ArrayList<>();
            list.add(zs);
            list.add(ls);

//            int i = 1/0; // 模拟服务器异常

            //3. 响应数据 TODO(普通字符串 -> json格式的字符串)


            //ContentType响应头指定的是响应体的数据类型 (MIME)
//        response.setContentType("text/html;charset=utf-8");
            response.setContentType("application/json;charset=utf-8");

            //代码1: java对象 -> json ,然后用响应体输出
//        String json = JSON.toJSonString(list);
//        response.getWriter().print(json);

            //代码2: java对象 -> json ,然后用响应体输出
//            JSON.writeJSonString(response.getWriter(),list);

            //代码3: 考虑响应结果的的封装
            JSON.writeJSONString(response.getWriter(),new Result(true,"查询成功",list));

        } catch (Exception e) { // 修改Exception,用来捕获算术异常
            e.printStackTrace(); // 异常信息打印控制台给程序员自己看
            response.setContentType("application/json;charset=utf-8");

            JSON.writeJSONString(response.getWriter(),new Result(false,"查询失败,请检查你家庭网络"));
        }
    }

}

6.3 请求参数改成json格式




    
    Title

package com.itheima03.union.pojo.vo;

import java.io.Serializable;

public class User implements Serializable {

    private String username;
    private String password;

    public User() {
    }

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + ''' +
                ", password='" + password + ''' +
                '}';
    }

    public String toJson() {
        return "{"username":""+username+"","password":"+password+"}";
    }

    public String getUsername() {
        return username;
    }

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

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

package com.itheima03.union;

import com.alibaba.fastjson.JSON;
import com.itheima02.json.User;
import com.itheima03.union.entity.Result;
import com.itheima03.union.pojo.po.Contact;

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.util.ArrayList;

@WebServlet("/Union03Servlet")
public class Union03Servlet extends HttpServlet {

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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //1. 接收请求
            User user = JSON.parseObject(request.getInputStream(), User.class);

            System.out.println(user);

            //2. 业务处理 (数据库: 伪数据)
            Contact zs = new Contact(1, "张三", true);
            Contact ls = new Contact(2, "李四", false);

            ArrayList list = new ArrayList<>();
            list.add(zs);
            list.add(ls);

//            int i = 1/0; // 模拟服务器异常

            //3. 响应数据 TODO(普通字符串 -> json格式的字符串)
            response.setContentType("application/json;charset=utf-8");
            JSON.writeJSONString(response.getWriter(),new Result(true,"查询成功",list));

        } catch (Exception e) {
            e.printStackTrace();
            response.setContentType("application/json;charset=utf-8");
            JSON.writeJSONString(response.getWriter(),new Result(false,"查询失败,请检查你家庭网络"));
        }
    }

}

6.4 抽取baseController

package cn.itcast.base;

import cn.itcast.entity.Result;
import cn.itcast.pojo.User;
import com.alibaba.fastjson.JSON;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class baseController {

    
    public static  T parseJson2Object(HttpServletRequest request, Class tClazz) throws IOException {
        return JSON.parseObject(request.getInputStream(), tClazz);
    }

    
    public static void printResult(HttpServletResponse response, Result result) throws IOException {
        response.setContentType("application/json;charset=utf-8");
        JSON.writeJSONString(response.getWriter(), result);
    }

}

七.综合案例自动补全项目搭建

需求

在输入框输入关键字，下拉框中异步显示与该关键字相关的用户名称

分析

查询以输入的关键字开头的用户
文本框使用keyup事件，得到文本框中的值，去掉前后空格。如果文本框的内容为空则不提交给服务器。
查询成功的回调函数中如果返回的用户数大于0才进行div的拼接，拼接以后显示在div中。
否则要隐藏div。
给大div中的子div绑定鼠标点击事件，点击某个名字则将div的文本内容显示在文本框中，并隐藏div

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-42cxc11P-1633616549507)(assets/1565427178364.png)]

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uioSWFGA-1633616549511)(assets/1553220989638.png)]

导入数据库脚本

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(32) DEFAULT NULL,
  `password` varchar(32) DEFAULT NULL,
  PRIMARY KEY (`id`)
);

INSERT INTO `user` VALUES (1, '张三', '123');
INSERT INTO `user` VALUES (2, '李四', '123');
INSERT INTO `user` VALUES (3, '王五', '123');
INSERT INTO `user` VALUES (4, '赵六', '123');
INSERT INTO `user` VALUES (5, '田七', '123');
INSERT INTO `user` VALUES (6, '孙八', '123');
INSERT INTO `user` VALUES (7, '张三丰', '123');
INSERT INTO `user` VALUES (8, '张无忌', '123');
INSERT INTO `user` VALUES (9, '李寻欢', '123');
INSERT INTO `user` VALUES (10, '王维', '123');
INSERT INTO `user` VALUES (11, '李白', '123');
INSERT INTO `user` VALUES (12, '杜甫', '123');
INSERT INTO `user` VALUES (13, '李贺', '123');
INSERT INTO `user` VALUES (14, '李逵', '123');
INSERT INTO `user` VALUES (15, '宋江', '123');
INSERT INTO `user` VALUES (16, '王英', '123');
INSERT INTO `user` VALUES (17, '鲁智深', '123');
INSERT INTO `user` VALUES (18, '武松', '123');
INSERT INTO `user` VALUES (19, '张薇', '123');
INSERT INTO `user` VALUES (20, '张浩', '123');
INSERT INTO `user` VALUES (21, '刘小轩', '123');
INSERT INTO `user` VALUES (22, '刘浩宇', '123');
INSERT INTO `user` VALUES (23, '刘六', '123');

编写实体类

package com.itheima.pojo.po;

import java.io.Serializable;

public class User implements Serializable {

    private Integer id;
    private String name;
    private String password;

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

    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 String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

代码




    
    自动完成

package com.itheima.web;

import com.alibaba.fastjson.JSON;
import com.itheima.entity.Result;
import com.itheima.pojo.po.User;
import com.itheima.service.UserService;

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.util.List;

@WebServlet("/AutoServlet")
public class AutoServlet extends HttpServlet {

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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 获取请求
        request.setCharacterEncoding("utf-8");
        String keyword = request.getParameter("keyword");

        //2. 业务处理
        UserService service = new UserService();
        List list = service.findUserByKd(keyword);

        //3. 响应数据
        response.setContentType("application/json;charset=utf-8");
        JSON.writeJSONString(response.getWriter(),new Result(true,"查询成功",list));

    }

}

package com.itheima.service;

import com.itheima.dao.UserDao;
import com.itheima.pojo.po.User;
import com.itheima.utils.SqlSessionUtil;
import org.apache.ibatis.session.SqlSession;

import java.util.List;

public class UserService {

    public List findUserByKd(String keyword) {
        SqlSession session = SqlSessionUtil.getSession();

        UserDao mapper = session.getMapper(UserDao.class);
        List list = mapper.findUserByKd(keyword);
        session.close();
        return list;
    }
}

package com.itheima.dao;

import com.itheima.pojo.po.User;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface UserDao {
    @Select("select * from user where name like concat(#{keyword},'%')")
    List findUserByKd(String keyword);
}

package com.itheima.entity;

import java.io.Serializable;


public class Result implements Serializable {
    private boolean flag;//执行结果，true为执行成功 false为执行失败
    private String message;//返回结果信息
    private Object result;//返回数据(如果是查询操作则设置,如果是增删改则不设置)

    public Result() {
    }
    //失败,或者成功的增删改
    public Result(boolean flag, String message){
        this.flag = flag;
        this.message = message;
    }
    //成功的查询
    public Result(boolean flag, String message, Object result) {
        this.flag = flag;
        this.message = message;
        this.result = result;
    }

    public boolean isFlag() {
        return flag;
    }

    public void setFlag(boolean flag) {
        this.flag = flag;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getResult() {
        return result;
    }

    public void setResult(Object result) {
        this.result = result;
    }
}

总结：
1.web项目，前端是tomcat，后端servelet，是同域状态。
2.如果前端使用tomcat，后端使用springboot，那就要解决跨域问题。
3.前端如果使用vue（import）项目，后端使用springboot，就需要路由解决跨域问题，但这个状态下vue需要install编译；如果使用vue（script），就不需要编译，直接当静态文件访问，也是需要解决跨域路由问题。
4.注意跨域问题，前后端分离的基本，前端一个url，后端url跨域。
5.前端一般两种方式发送数据给后端（并返回数据），一种就是全域名url(可以直接发送)，一种就是省略三要素的相对域名（uri）（拼接三要素），这个就需要封装文件，一个就是配置文件，一个就是路由文件。
6.后端也是可以用配置实现跨域，但有很多弊端，所以不用，这是就衍生出前端的跨域解决方案，所以现在基本上都是前端解决跨域问题。

Ajax&Json

Java相关栏目本月热门文章