【JavaWeb学习笔记】16 - JSon和Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON对象和字符串对象转换</title>
    <script type="text/javascript">
        window.onload = function () {
            //解读JSON
            //1.JSON 是一个js的内置对象(build-in)，可以直接使用
            //  console.log("JSON=", JSON);

            //演示如何将以json对象->string
            var jsonPerson = {
                "name": "jack",
                "age": 20
            }

            console.log("jsonPerson=" , jsonPerson);
            var strPerson = JSON.stringify(jsonPerson);
            console.log("strPerson= ", strPerson, " strPerson类型= ", typeof strPerson);

            //string->json
            //注意要转成json对象的string 格式必须满足json格式
            var strDog = "{\"name\":\"小黄狗\", \"age\":2}";
            var jsonDog = JSON.parse(strDog);
            console.log("jsonDog= ", jsonDog);

        }
    </script>
</head>
<body>
<h1>JSON对象和字符串对象转换</h1>

</body>
</html>

3.JSON对象和字符串对象转换

1.应用案例

1. JSON.stringify(json)功能:将一个json对象转换成为json字符串[简单说名字来源.]? ?Serialize

2. JSON.parse(jsonString )功能:将一个json字符串转换成为json对象

2.注意事项和细节

1、JSON .springiiy(json对象)会返回对应string,并不会影响原来json对象

2、JSON.parse(string)函数会返回对应的json对象,并不会影响原来string

3、在定义Json对象时，可以使用 '? ? ' 表示字符串，前面的key也可以不用" " 或者 '? '

????????比如var json_person = {"name": "jack", "age": 100};

????????也可以写成var json_person = {'name': 'jack', 'age': 100};

4、但是在把原生字符串转成json对象时,必须使用"",否则会报错比如:

????????var str_dog = "{'name':'小黄狗', 'age': 4}";转json就会报错

5、JSON.springify(json对象)返回的字符串,都是"? "表示的字符串,所以在语法格式正确的情况下，是可以重新转成json对象的. [演示案例]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json和字符串转换的注意事项和细节</title>
    <script type="text/javascript">
        window.onload = function () {

            var jsonPerson = {
                "name": "jack",
                "age": 20
            }

            //1. JSON.springify(json对象) 会返回对应string, 并不会影响原来json对象
            //   可以这样理解 java基础 int n = 10; double n2 = (double)n;
            var strPerson = JSON.stringify(jsonPerson);
            console.log("jsonPerson=", jsonPerson);

            //2. JSON.parse(string) 函数会返回对应的json对象, 并不会影响原来string

            var strDog = "{\"name\":\"小黄狗\", \"age\":2}";
            var jsonDog = JSON.parse(strDog);
            console.log("strDog=", strDog, " 类型= ", typeof strDog);

            //3. 在定义Json对象时, 可以使用 ' ' 表示字符串
            //   前面的key 可以不用" " 或者 ' '

            var jsonPerson2 = {
                name: 'jack',
                age: 20
            }
            console.log("jsonPerson2=", jsonPerson2);
            //4. 但是在把原生字符串转成 json对象时, 必须使用 "", 否则会报错 比如
            //   工作时，非常容易错
            var strdog3 = "{\"name\":\"小黄狗~\", \"age\": 4}";
            JSON.parse(strdog3);

            //5. JSON.springify(json对象) 返回的字符串, 都是 "" 表示的字符串
            var strPerson2 = JSON.stringify(jsonPerson2);
            var parse = JSON.parse(strPerson2);
            console.log("parse=", parse);

        }
    </script>
</head>
<body>

</body>
</html>

4.JSon在Java中的使用

1.说明

1. java中使用json,需要引入到第3方的包gson.jar

2. Gson是Google提供的用来在Java对象和JSON数据之间进行映射的Java类库。

3.可以对JSON字符串和Java对象相互转换

2.JSON在Java中应用场景

1. Javabean对象和json字符串的转换

2. List对象和json字符串的转换

3. map对象和json字符串的转换

public class JavaJSon {
    public static void main(String[] args) {

        //创建一个gson对象，做为一个工具对象使用
        Gson gson = new Gson();

        //演示javabean 和 json字符串的转换
        Book book = new Book(100, "韩顺平零基础学Java");

        //1. 演示把javebean -> json字符串
        String strBook = gson.toJson(book);
        System.out.println("strBook=" + strBook);
        //2. json字符串->javabean
        //(1) strBook 就是 json字符串
        //(2) Book.class 指定将 json字符串转成 Book对象
        //(3) 底层是反射机制
        Book book2 = gson.fromJson(strBook, Book.class);
        System.out.println("book2=" + book2);

        //3. 演示把list对象 -> json字符串
        List<Book> bookList = new ArrayList<>();
        bookList.add(new Book(200, "天龙八部"));
        bookList.add(new Book(300, "三国演义"));

        //因为把对象,集合转成字符串, 相对比较简单
        //底层只需要遍历, 按照json格式拼接返回即可
        String strBookList = gson.toJson(bookList);
        System.out.println("strBookList= " + strBookList);

        //4. 演示把json字符串 -> list对象
        //(1) 如果需要把json字符串 转成 集合这样复杂的类型, 需要使用gson提供的一个类
        //(2) TypeToken , 是一个自定义泛型类, 然后通过TypeToken来指定我们需要转换成的类型
        /*
        com.google.gson.reflect

        public class TypeToken<T> {
            final Class<? super T> rawType;
            final Type type;
            final int hashCode;

            protected TypeToken() {
                this.type = getSuperclassTypeParameter(this.getClass());
                this.rawType = Types.getRawType(this.type);
                this.hashCode = this.type.hashCode();
            }
         */
        //(1) 返回类型的完整路径java.util.List<com.hspedu.json.Book>
        //(2) gson的设计者，需要得到类型的完整路径，然后进行底层反射
        //(3) 所以gson 设计者就提供TypeToken, 来搞定.

        //二说 TypeToken , 为甚要加 {}

        //(1) 如果我们  new TypeToken<List<Book>>()  提示
        // 'TypeToken()' has protected access in 'com.google.gson.reflect.TypeToken'
        //(2) 因为TypeToken 的无参构造器是protected ， 而 new TypeToken<List<Book>>() 就是调用其无参构造器
        //(3) 根据java基础, 如果一个方法是protected ,而且不在同一个包， 是不能直接访问的, 因此报错
        //(4) 为什么 new TypeToken<List<Book>>(){} 使用就可以，这里就涉及到匿名内部类的知识.
        //(5) 当 new TypeToken<List<Book>>(){} 其实这个类型就是不是 TypeToken 而是一个匿名内部类(子类)
        //(6) 而且这个匿名内部类是有自己的无参构造器(隐式), 根据java基础规则 当执行子类的无参构造器时, 默认super();

        //三说 TypeToken->举一个例子.[对java基础回顾.]
        Type type = new TypeToken<List<Book>>() {}.getType();

        List<Book> bookList2 = gson.fromJson(strBookList, type);
        System.out.println("bookList2= " + bookList2);


        //5, 把map对象->json字符串
        Map<String, Book> bookMap = new HashMap<>();
        bookMap.put("k1", new Book(400, "射雕英雄传"));
        bookMap.put("k2", new Book(500, "西游记"));

        String strBookMap = gson.toJson(bookMap);
        System.out.println("strBookMap=" + strBookMap);

        //6. 把json字符串 -> map对象
        //   new TypeToken<Map<String, Book>>() {}.getType()=> java.util.Map<java....String,com.yinhai.json.Book>
        Map<String, Book> bookMap2 = gson.fromJson(strBookMap,
                new TypeToken<Map<String, Book>>() {
                }.getType());
        System.out.println("bookMap2=" + bookMap2);

    }
}

注意?在该TypeToken类型?创建需要使用匿名内部类，然后获取对应的type返回type，为什么是匿名内部类？举例子，走的是受保护的匿名内部类的子类的默认的super

public class A<T> {
    protected A() {
        System.out.println("A的protected A()被调用...");
    }
    A(String str){
        System.out.println("A的默认A被调用 只在本类可用");
    }
}

package com.yinhai.t2;

import com.yinhai.t1.A;

public class Test {
    public static void main(String[] args) {
        //'A()' has protected access in 'com.yinhai.t1.A'
        //1. 因为A类和Test类不在同一个包
        //2. 就不能访问A类的protected 方法, 包括构造器
        //3. A<String>(){} 就是一个匿名内部类， 可以理解成是A类子类
        //4. A<String>(){} 匿名内部类, 有一个隐式的无参构造器, 根据java基础 无参构造器 有默认super()
        //5. 当你执行 new A<String>(){} 会调用到A类的无参的protected 构造器
        //6. 如果还不明白, 就回去看java基础 泛型+匿名内部类 =>API
        A a = new A<String>(){};
        //A a1 = new A(""){}; //如果有默认的构造器 则不能用匿名内部类访问，因为子类也无法访问到默认权限的构造器
        System.out.println(a.getClass());//Test$1
    }
}

二、Ajax

官方文档

AJAX 简介

1.Ajax基本介绍

1.Ajax是什么

1. AJAX即"Asynchronous Javascript And XML"(异步JavaiScript和XML)

2.Ajax是一种浏览器异步发起请求（指定发哪些数据），局部更新页面的技术

2.Ajax经典应用场景

1.搜索引擎根据用户输入关键字，自动提示检索关键字

2.动态加载数据，按需取得数据[树形菜单、联动菜单...]

3.改善用户体验。[ 输入内容前提示、带进度条文件上传...]

4.电子商务应用。[ 购物车、邮件订阅...]

5.访问第三方服务。[ 访问搜索服务、rss阅读器]

6.页面局部刷新, https://piaofang. maoyan.com/dashboard

2.Ajax原理示意图

1.传统的WEB引用

2.使用Ajax的通讯方式

3.JavaScript原生Ajax请求

1.案例?验证用户名是否存在?使用Ajax?对页面进行局部刷新

需要引入两个包用于支撑?gson和servlet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript">
        window.onload = function () { //页面加载后执行function
            var checkButton = document.getElementById("checkButton");
            //给checkButton绑定onclick
            checkButton.onclick = function () {

                //1. 创建XMLHttpRequest对象(!!!) [ajax引擎对象]
                var xhr = new XMLHttpRequest();
                //   获取用户填写的用户名
                var uname = document.getElementById("uname").value;

                //2. 准备发送指定数据 open, send
                //(1)"GET" 请求方式可以 GET/POST
                //(2)"/ajax/checkServlet?username=" + uname 就是 url
                //(3)true , 表示异步发送
                xhr.open("GET", "/ajax/checkServlet?uname=" + uname, true);

                //老师说明，在send函数调用前，给XMLHttpRequest 绑定一个事件onreadystatechange
                //该事件表示，可以去指定一个函数，当数据变化，会触发onreadystatechange
                // 每当 xhr对象readyState 改变时，就会触发 onreadystatechange 事件
                xhr.onreadystatechange = function () {
                    //如果请求已完成，且响应已就绪, 并且状态码是200
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //把返回的jon数据,显示在div
                        document.getElementById("div1").innerHTML = xhr.responseText;


                        //console.log("xhr=", xhr)
                        var responseText = xhr.responseText;
                        //console.log("返回的信息=" + responseText);
                        if (responseText != "") {
                            document.getElementById("myres").value = "用户名不可用"
                        } else {
                            document.getElementById("myres").value = "用户名可用"
                        }
                    }
                }

                //3. 真正的发送ajax请求[http请求]
                // 再说明如果你POST 请求，使用send("发送的数据")
                xhr.send();


            }
        }
    </script>
</head>
<body>
<h1>用户注册~</h1>
<form action="/ajax/checkServlet" method="GET">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="checkButton" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>

package com.yinhai.servlet;

import com.google.gson.Gson;
import com.yinhai.bean.User;

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;

/**
 * @author 银小海
 * @version 1.0
 * @email yinhai14@qq.com
 */
@WebServlet(name = "CheckServlet",urlPatterns = "/checkServlet")
public class CheckServlet extends HttpServlet {

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

        //假定用户名为 king , 就不可用, 其它用户名可以
        if("king".equals(uname)) {//不能使用king用户名
           //后面这个信息，是从DB获取
           User king = new User(100, "king", "666", "king@sohu.com");
           //把 king 转成 json字符串
           String strKing = new Gson().toJson(king);
           //返回
           response.getWriter().write(strKing);
        } else {
           //如果用户名可以用，返回""
           response.getWriter().write("");
        }

    }

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

2.本节作业

需求分析:到数据库去验证用户名是否可用

1)点击验证用户名,到数据库中验证用户名是否可用

2)创建数据库ajaxdb，创建表user表自己设计(自己试试)

3)使用ajax方式，服务端验证该用户名是否已经占用了,如果该用户已经占用,以json格式返回该用户信息

4)对页面进行局部刷新，显示返回信息

5)只需要再前面的应用实例中，进行升级,接入DB

创建DB表?以及插入默认数据

注意?引入依赖库但在out可能不会拷贝该lib过去?所以需要手动拷贝

servlet

package com.yinhai.servlet;

import com.google.gson.Gson;
import com.yinhai.bean.User;
import com.yinhai.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;

/**
 * @author 银小海
 * @version 1.0
 * @email yinhai14@qq.com
 */
@WebServlet(name = "CheckServlet",urlPatterns = "/checkServlet")
public class CheckServlet extends HttpServlet {

    //定义一个UserService属性
    private UserService userService = new UserService();

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //System.out.println("CheckUserServlet 被调用....");

        //接收ajax提交的数据
        String uname = request.getParameter("username");
        String pwd = request.getParameter("password");
        String email = request.getParameter("email");
        System.out.println("uname= " + uname + pwd + email);


        response.setContentType("text/html;charset=utf-8");
        // 到DB查询
        // 如果有就返回user对象，否则，返回的是null
        User user = userService.getUserByName(uname);
        // String user = "";
        if (user != null) {//说明用户名存在..,返回该user的json格式数据字符串
            Gson gson = new Gson();
            String strUser = gson.toJson(user);
            response.getWriter().write(strUser);

        } else {
            response.getWriter().write("");
        }



        // // 假定用户名为 king , 就不可用, 其它用户名可以
        // if("king".equals(uname)) {//不能使用king用户名
        //    //后面这个信息，是从DB获取
        //    User king = new User(100, "king", "666", "king@sohu.com");
        //    //把 king 转成 json字符串
        //    String strKing = new Gson().toJson(king);
        //    //返回
        //    response.getWriter().write(strKing);
        // } else {
        //    //如果用户名可以用，返回""
        //    response.getWriter().write("");
        //
        // }

    }

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

service

package com.yinhai.service;

import com.yinhai.bean.User;
import com.yinhai.dao.UserDAO;

/**
 * @author 银小海
 * @version 1.0
 * @email yinhai14@qq.com
 */
//提供业务方法 比如获得User
public class UserService {

    private UserDAO userDAO = new UserDAO();

    public User getUserByName(String username){

        return userDAO.querySingle("select * from `user` where username=?",User.class,username);

    }
    public void insertUserName(String username,String pwd,String email){
        userDAO.dml("INSERT INTO `user`(?,?,?,?)",null,username,pwd,email);
    }
}

以前编写的DAO类

package com.yinhai.dao;


import com.yinhai.util.JDBCUtilsByDruid;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import javax.xml.ws.handler.Handler;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;

/**
 * @author 银小海
 * @version 1.0
 * @email yinhai14@qq.com
 * 开发BasicDAO是其他DAO的父类
 */
public class BasicDAO<T> {

    private QueryRunner qr = new QueryRunner();

    //开发通用的增删改查方法
    public int dml(String sql , Object... parameters){
        Connection connection = null;
        try {
            connection = JDBCUtilsByDruid.getConnection();
            int update = qr.update(connection, sql, parameters);
            return update;
        } catch (SQLException e) {//将编译异常 -> 运行异常 抛出
            throw new RuntimeException(e);
        }finally {
            JDBCUtilsByDruid.close(null,null,connection);
        }
    }
    //返回多个对象(即查询的结果是多行)，针对任意表
    /**
     *
     * @param sql sql 语句，可以有 ?
     * @param clazz 传入一个类的Class对象 比如 Actor.class
     * @param parameters 传入 ? 的具体的值，可以是多个
     * @return 根据Actor.class 返回对应的 ArrayList 集合
     */
    public List<T> queryMulti(String sql,Class<T> clazz,Object... parameters){

        Connection connection = null;
        try {
            connection = JDBCUtilsByDruid.getConnection();
            return qr.query(connection, sql, new BeanListHandler<T>(clazz),parameters);

        } catch (SQLException e) {//将编译异常 -> 运行异常 抛出
            throw new RuntimeException(e);
        }finally {
            JDBCUtilsByDruid.close(null,null,connection);
        }

    }

    //查询单行结果 的通用方法
    public T querySingle(String sql,Class<T> clazz,Object... parameters){
        Connection connection = null;
        try {
            connection = JDBCUtilsByDruid.getConnection();
            return qr.query(connection, sql, new BeanHandler<T>(clazz),parameters);

        } catch (SQLException e) {//将编译异常 -> 运行异常 抛出
            throw new RuntimeException(e);
        }finally {
            JDBCUtilsByDruid.close(null,null,connection);
        }
    }

    //查询单行单列 即返回单值的方法
    public Object queryScalar(String sql,Object... parameters){
        Connection connection = null;
        try {
            connection = JDBCUtilsByDruid.getConnection();
            return qr.query(connection, sql, new ScalarHandler(),parameters);

        } catch (SQLException e) {//将编译异常 -> 运行异常 抛出
            throw new RuntimeException(e);
        }finally {
            JDBCUtilsByDruid.close(null,null,connection);
        }
    }
}

JAVAbean对象

package com.yinhai.bean;

/**
 * @author 银小海
 * @version 1.0
 * @email yinhai14@qq.com
 */
public class User {
    private Integer id;
    private String username;
    private String pwd;
    private String email;
    //反射必须提供无参构造器
    public User(){

    }
    public User(Integer id, String username, String pwd, String email) {
        this.id = id;
        this.username = username;
        this.pwd = pwd;
        this.email = email;
    }

    public Integer getId() {
        return id;
    }

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

    public String getUsername() {
        return username;
    }

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

    public String getPwd() {
        return pwd;
    }

    public void setPwd(String pwd) {
        this.pwd = pwd;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

一个JDBC类

package com.yinhai.util;

import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.io.FileInputStream;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;

/**
 * @author 银小海
 * @version 1.0
 * @email yinhai14@qq.com
 */
public class JDBCUtilsByDruid {
    private static DataSource ds;

    // 测试连接
    // public static void main(String[] args) throws SQLException {
    //     Connection connection = JDBCUtilsByDruid.getConnection();
    //     System.out.println(connection);
    // }
    // 在静态代码块完成 ds初始化
    static {
        Properties properties = new Properties();
        try {
            //目前是Java方式启动
            //所以我们要获取src目录下的文件需要使用 类加载器
            //原先是JavaSe方式获取 现在是JavaWeb方式
            // InputStream resourceAsStream = JDBCUtilsByDruid.class.getClassLoader().getResourceAsStream("druid.properties");
            properties.load(JDBCUtilsByDruid.class.getClassLoader().getResourceAsStream("druid.properties"));

            //properties.load(new FileInputStream("ajax/src/druid.properties"));
            ds = DruidDataSourceFactory.createDataSource(properties);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

    //编写getConnection方法
    public static Connection getConnection() throws SQLException {
        return ds.getConnection();
    }

    //关闭连接, 再次强调： 在数据库连接池技术中，close 不是真的断掉连接
    //而是把使用的Connection对象放回连接池
    public static void close(ResultSet resultSet, Statement statement, Connection connection) {

        try {
            if (resultSet != null) {
                resultSet.close();
            }
            if (statement != null) {
                statement.close();
            }
            if (connection != null) {
                connection.close();
            }
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
    }
}

3.原生Ajax请求问题分析

1.编写原生的Ajax要写很多的代码，还要考虑浏览器兼容问题，使用不方便。

2.在实际工作中，一般使用 JavaScript的框架(比如Jquery)发送Ajax请求，从而解决这个问题

4.jQuery的Ajax请求

1.$.ajax方法

url:请求的地址

type :请求的方式get或post

data :发送到服务器的数据。将自动转换为请求字符串格式

success:成功的回调(某个Ajax事件来触发的)函数

dataType:返回的数据类型常用json或text

2.$.get请求和$.post请求常用参数

url;请求的URL地址

data:请求发送到服务器的数据:

success:成功时回调函数

type:返回内容格式， xmI, html, script, json, text

3.$.getJSON常用参数

url:请求发送的哪个URL

data:请求发送到服务器的数据

success:请求成功时运行的函数

4.应用实例

需要设置对应的格式即不报错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定事件
            $("#btn1").click(function () {
                alert("ok!")
                //发出ajax
                /**
                 * 1. 指定参数时，需要在{}
                 * 2. 给参数时，前面需要指定参数名
                 * 3. dataType: "json" 要求服务器返回的数据格式是json
                 */
                //1.$.ajax()方法
                //     $.ajax({
                //         url: "/ajax/checkServletJq",
                //         type: "POST",
                //         data: { //这里我们直接给json, 为啥我要传日期, 为了浏览器缓存
                //             username: $("#uname").val(),
                //             date: new Date()
                //         },
                //         error: function () { //失败后的回调函数
                //             console.log("失败~")
                //         },
                //         success: function (data, status, xhr) {
                //             console.log("成功");
                //             console.log("data=", data);
                //             console.log("status=", status);
                //             console.log("xhr=", xhr);
                //             //data是json对象 如果需要显示需要转成json的字符串
                //             $("#div1").html(JSON.stringify(data));
                //             //对返回的结果进行处理
                //             if ("" == data.username) {
                //                 $("#myres").val("该用户名可用");
                //             } else {
                //                 $("#myres").val("该用户名不可用");
                //             }
                //         },
                //         dataType: "json"
                //     })


                //2.$.get请求和$.post请求常用参数说明
                //1.$.get() 默认是get请求，不需要指定 请求方式
                //2.不需要指定参数名
                //3.填写的实参，是顺序 url, data, success回调函数, 返回的数据格式
                //讲解.get() 使用
                // $.get(
                //     "/ajax/checkServletJq",
                //     {
                //         username: $("#uname").val(),
                //         date: new Date()
                //     },
                //     function (data, status, xhr) {
                //         console.log("$.get() 成功");
                //         console.log("data=", data);
                //         console.log("status=", status);
                //         console.log("xhr=", xhr);
                //         //data是json对象-> 显示转成json的字符串
                //         $("#div1").html(JSON.stringify(data));
                //         //对返回的结果进行处理
                //         if ("" == data.username) {
                //             $("#myres").val("该用户名可用");
                //         } else {
                //             $("#myres").val("该用户名不可用");
                //         }
                //     },
                //     "json"
                // )

                //老师说明$.post() 和 $.get() 的方式一样
                //只是这时，是按照post方式发送ajax请求
                // $.post(
                //     "/ajax/checkServletJq",
                //     {
                //         username: $("#uname").val(),
                //         date: new Date()
                //     },
                //     function (data, status, xhr) {
                //         console.log("$.post() 成功");
                //         console.log("data=", data);
                //         console.log("status=", status);
                //         console.log("xhr=", xhr);
                //         //data是json对象-> 显示转成json的字符串
                //         $("#div1").html(JSON.stringify(data));
                //         //对返回的结果进行处理
                //         if ("" == data.username) {
                //             $("#myres").val("该用户名可用");
                //         } else {
                //             $("#myres").val("该用户名不可用");
                //         }
                //     },
                //     "json"
                // )
                
                //1. 如果你通过jquery发出的ajax请求是get 并且 返回的数据格式是json
                //2. 可以直接使用getJSON() 函数，就很简洁
                // $.getJSON(
                //     "/ajax/checkServletJq",
                //     {
                //         username: $("#uname").val(),
                //         date: new Date()
                //     },
                //     function (data, status, xhr) {//成功后的回调函数
                //         console.log("$.getJSON 成功");
                //         console.log("data=", data);
                //         console.log("status=", status);
                //         console.log("xhr=", xhr);
                //         //data是json对象-> 显示转成json的字符串
                //         $("#div1").html(JSON.stringify(data));
                //         //对返回的结果进行处理
                //         if ("" == data.username) {
                //             $("#myres").val("该用户名可用");
                //         } else {
                //             $("#myres").val("该用户名不可用");
                //         }
                //     }
                // )
            })
        })
    </script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkServletJq" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" id="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>

usercheckservlet

package com.yinhai.servlet;

import com.google.gson.Gson;
import com.yinhai.bean.User;
import com.yinhai.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;

/**
 * @author 银小海
 * @version 1.0
 * @email yinhai14@qq.com
 */
@WebServlet(name = "CheckServlet_jquery",urlPatterns = "/checkServletJq")
public class CheckServlet_jquery extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("be invoked.....");
        String username = request.getParameter("username");
        System.out.println("ajax Jquery =" + username);
        Gson gson = new Gson();
        //验证业务接入到DB
        // User dbusername = new UserService().getUserByName("king");

        response.setContentType("text/json;charset=utf-8");
        //接受jquery发送的ajax数据
        if ("king".equals(username)) {

            User user = new User(100, "king", "abc", "king@sohu.com");
            response.getWriter().write(gson.toJson(user));

            // response.getWriter().write(gson.toJson(dbusername));

        } else {
            //返回一个不存在的User=> 这里老师是有设计
            User user = new User(-1, "", "", "");
            response.getWriter().write(gson.toJson(user));
        }




    }

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

5.本章作业

只要调用即可，麻烦的是JDBC需要重新再复习一遍

文章来源:https://blog.csdn.net/qq_41891655/article/details/135186425
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！