JavaWeb-Ajax

文章目录

    • 1.基本介绍
    • 2.应用场景
    • 3.两种通信方式对比
        • 1.传统web通信方式
        • 2.Ajax通信方式
    • 4.原生Ajax
        • 1.快速入门
          • 1.案例
          • 2.创建maven项目,导入依赖
          • 3.编写代码
            • 1.User.java
            • 2.login.html
            • 3.CheckUserServlet.java
            • 4.结果
          • 4.后置资料
          • 5.课后作业——接入DB
            • 1.导入依赖
            • 2.创建德鲁伊连接池配置文件src/druid.properties
            • 3.创建德鲁伊工具类java/utils/JDBCUtilsByDruid.java
            • 4.创建java/BasicDao_/BasicDao.java
            • 5.数据表设计
            • 6.表的映射类java/entity/User.java
            • 7.java/dao/UserDao.java
            • 8.测试使用
            • 9.注意:在maven项目下读取properties配置文件
            • 10.login.html
            • 11.UserService.java
            • 12.CheckUserServlet.java
            • 13.结果
            • 14.完整文件目录
    • 5.jQuery操作Ajax
        • 1.原生Ajax请求问题分析
        • 2.Ajax函数基本介绍
        • 3.jQuery $.ajax应用实例(在前面项目基础上)
          • 1.login2.html
          • 2.checkUserServlet2.java
        • 4.jQuery $.get应用实例
          • 1.注意参数的顺序
          • 2.代码实例
        • 5.jQuery $.post应用实例
          • 1.get和post的调用方式是一样的
          • 2.代码实例
        • 6.jQuery $.getJSON应用实例
          • 1.如果是get请求,并且要求响应的是json类型,则直接使用getJSON函数即可,只有三个参数url、data、回调函数
          • 2.代码实例
    • 6.JSON与Ajax小结
        • 1.关于java中的JSON
          • 1.JSON中的key都是String
          • 2.一个javabean,map都是一个JSON对象
          • 3.list是一个数组
          • 4.关于value在java中可以选择的类型
        • 2.关于JQuery操作Ajax
          • 使用$.getJSON,会将java中返回的json字符串自动转换为json对象返回

1.基本介绍

image-20240202153833940

2.应用场景

image-20240202154309196

3.两种通信方式对比

1.传统web通信方式

image-20240202155411518

2.Ajax通信方式

image-20240202160111099

image-20240202160121583

4.原生Ajax

1.快速入门
1.案例

image-20240202160920736

image-20240202163054706

2.创建maven项目,导入依赖
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.2.4</version>
    </dependency>
  </dependencies>
3.编写代码
1.User.java
package entity;

/**
 * @author 孙显圣
 * @version 1.0
 */
public class User {
    private Integer id;
    private String username;
    private String pwd;
    private String email;

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

2.login.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript">
        window.onload = function () {
            //获取验证用户名按钮的dom对象
            var elementById = document.getElementById("checkButton");
            elementById.onclick = function () { //绑定点击事件
                //点击按钮之后发送ajax请求到服务器
                //创建xmlHttpRequest对象
                var xmlHttpRequest = new XMLHttpRequest();
                //由于需要验证用户名,所以先获取username的信息
                var elementById1 = document.getElementById("uname");
                var username = elementById1.value;
                //打开ajax引擎对象,放入username的数据
                //第一个参数是请求方式,第二个是url,第三个是开启异步
                xmlHttpRequest.open("get", "/ajax/checkUserServlet" + "?uname=" +username, true);

                //在send之前,给ajax引擎对象绑定一个事件,当引擎对象的onreadystate变化时就会触发
                //初始发送成功是2,请求处理中是3,请求已完成且响应已就绪是4,也就是会改变两次,触发两次事件
                xmlHttpRequest.onreadystatechange = function () {
                    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                        //判断是否请求已完成且响应已就绪,并且响应码是200
                        var responseText = xmlHttpRequest.responseText; //获取响应的信息
                        //得到要填入信息的input
                        var elementById2 = document.getElementById("myres");
                        if (responseText != "") {
                            elementById2.value = "用户名可用"
                        }
                        else {
                            elementById2.value = "用户名不可用"
                        }
                        //把返回的json数据显示在div,实现局部刷新
                        var elementById3 = document.getElementById("div1");
                        elementById3.innerText = responseText;

                    }
                }

                //发送,如果是get请求则直接发送,如果是post请求,则在里面放入内容
                xmlHttpRequest.send();

            }
        }
    </script>
</head>
<body>
<h1>用户注册</h1>
<form action="/ajax/checkUserServlet" method="post">
    用户名字:<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>
3.CheckUserServlet.java
package servlet;

import com.google.gson.Gson;
import entity.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
 */
@WebServlet("/checkUserServlet")
public class CheckUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String uname = req.getParameter("uname");

        if ("king".equals(uname)) { //如果用户是king,将用户信息使用json的形式发送到前端
            User king = new User(1, "king", "123456", "1721469477@qq.com");
            //转换成json字符串
            String json = new Gson().toJson(king);
            //设置编码
            resp.setContentType("text/html;charset=utf-8");
            //返回
            resp.getWriter().print(json);
        }
        else {
            //返回空
            resp.getWriter().print("");
        }
    }

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

4.结果

image-20240202200617805

4.后置资料

image-20240202170446289

image-20240202171214234

5.课后作业——接入DB

image-20240203095855575

1.导入依赖
    <dependency>
      <groupId>commons-dbutils</groupId>
      <artifactId>commons-dbutils</artifactId>
      <version>1.3</version>
    </dependency>
    <dependency>
      <groupId>com.mysql</groupId>
      <artifactId>mysql-connector-j</artifactId>
      <version>8.0.32</version>
    </dependency>
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.10</version>
    </dependency>
2.创建德鲁伊连接池配置文件src/druid.properties
#key=value
driverClassName=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/hsp_db02?rewriteBatchedStatements=true
#url=jdbc:mysql://localhost:3306/girls
username=root
password=root
#initial connection Size
initialSize=10
#min idle connecton size
minIdle=5
#max active connection size
maxActive=50
#max wait time (5000 mil seconds)
maxWait=5000
3.创建德鲁伊工具类java/utils/JDBCUtilsByDruid.java
package utils;

import com.alibaba.druid.pool.DruidDataSourceFactory;

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

/**
 * @author 孙显圣
 * @version 1.0
 */
public class JDBCUtilsByDruid {
    //静态数据源引用(jdbc的接口)
    private static DataSource dataSource;

    //静态代码块,在类加载时为数据源引用赋值
    static {
        //1.读取配置文件
        Properties properties = new Properties();
        try {
            properties.load(new FileInputStream("src\\druid.properties"));
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        //2.使用配置文件,创建德鲁伊数据源对象
        try {
            dataSource = DruidDataSourceFactory.createDataSource(properties);
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }

    //编写getConnection方法
    public static Connection getConnection() {
        try {
            return dataSource.getConnection();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
    }

    //把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);
        }
    }


}

4.创建java/BasicDao_/BasicDao.java
package BasicDao_;

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 utils.JDBCUtilsByDruid;

import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;

/**
 * @author 孙显圣
 * @version 1.0
 */
public class BasicDao<T> { //泛型指定具体类型
    //获取QueryRunner,用于执行crud语句
    private QueryRunner qr = new QueryRunner();

    //开发通用的dml方法
    public int update(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 {
            //关闭资源
            try {
                connection.close();
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
    }

    //返回多个对象,即查询的结果是多行的
    /**
     * @param sql:传入sql语句
     * @param clazz:传入一个类的Class对象,类型由泛型决定,这个类型是要封装到的javabean类型
     * @param parameters:传入填充sql的参数
     * @return 根据Class类型返回对应的ArrayList集合
     */
    public List<T> queryMulti(String sql, Class<T> clazz, Object... parameters) {
        //获取连接
        Connection connection = null;

        try {
            connection = JDBCUtilsByDruid.getConnection();
            List<T> query = qr.query(connection, sql, new BeanListHandler<T>(clazz), parameters);
            return query;
        } catch (SQLException e) {
            throw new RuntimeException(e);
        } finally {
            //关闭资源
            try {
                connection.close();
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
    }

    //查询单行的结果的通用方法
    public T querySingle(String sql, Class<T> clazz, Object... parameters) {
        //获取连接
        Connection connection = null;

        try {
            connection = JDBCUtilsByDruid.getConnection();
            T query = qr.query(connection, sql, new BeanHandler<T>(clazz), parameters);
            return query;
        } catch (SQLException e) {
            throw new RuntimeException(e);
        } finally {
            //关闭资源
            try {
                connection.close();
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
    }

    //查询单行单列的方法
    public Object queryScalar(String sql, Object... parameters) {
        //获取连接
        Connection connection = null;

        try {
            connection = JDBCUtilsByDruid.getConnection();
            Object query = qr.query(connection, sql, new ScalarHandler(), parameters);
            return query;
        } catch (SQLException e) {
            throw new RuntimeException(e);
        } finally {
            try {
                connection.close();
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }

    }

}

5.数据表设计
CREATE TABLE `user`(
		id INT PRIMARY KEY AUTO_INCREMENT,
		username VARCHAR(32) NOT NULL DEFAULT(''),
		pwd VARCHAR(32) NOT NULL DEFAULT(''),
		email VARCHAR(32) NOT NULL DEFAULT('')
);

INSERT INTO user VALUES(NULL, 'king', '123456', '1721469477@qq.com');
6.表的映射类java/entity/User.java

注意一定要添加无参构造

package entity;

/**
 * @author 孙显圣
 * @version 1.0
 */
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;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", pwd='" + pwd + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
}

7.java/dao/UserDao.java
package dao;

import BasicDao_.BasicDao;
import entity.User;

/**
 * @author 孙显圣
 * @version 1.0
 */
public class UserDao extends BasicDao<User> {
}

8.测试使用
import dao.UserDao;
import entity.User;
import org.junit.Test;

/**
 * @author 孙显圣
 * @version 1.0
 */
public class test {
    @Test
    public void testSelect() {
        UserDao userDao = new UserDao();
        //测试查询
        User user = userDao.querySingle("select * from user where id = ?", User.class, 1);
        System.out.println(user);

    }

}

image-20240203102812543

9.注意:在maven项目下读取properties配置文件
  1. 前面是在javase环境下读取的properties配置文件,如果是在maven项目下,应该将properties配置文件放在resources下,使用类加载器读取
  2. 修改JDBCUtilsByDruidimage-20240203112705301
  3. 更改配置文件druid.properties位置image-20240203112803343
10.login.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript">
        window.onload = function () {
            //获取验证用户名按钮的dom对象
            var elementById = document.getElementById("checkButton");
            elementById.onclick = function () { //绑定点击事件
                //点击按钮之后发送ajax请求到服务器
                //创建xmlHttpRequest对象
                var xmlHttpRequest = new XMLHttpRequest();
                //由于需要验证用户名,所以先获取username的信息
                var elementById1 = document.getElementById("uname");
                var username = elementById1.value;
                //打开ajax引擎对象,放入username的数据
                //第一个参数是请求方式,第二个是url,第三个是开启异步
                xmlHttpRequest.open("get", "/ajax/checkUserServlet" + "?uname=" +username, true);

                //在send之前,给ajax引擎对象绑定一个事件,当引擎对象的onreadystate变化时就会触发
                //初始发送成功是2,请求处理中是3,请求已完成且响应已就绪是4,也就是会改变两次,触发两次事件
                xmlHttpRequest.onreadystatechange = function () {
                    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                        //判断是否请求已完成且响应已就绪,并且响应码是200
                        var responseText = xmlHttpRequest.responseText; //获取响应的信息
                        //得到要填入信息的input
                        var elementById2 = document.getElementById("myres");
                        if (responseText != "") {
                            elementById2.value = "用户名可用"
                        }
                        else {
                            elementById2.value = "用户名不可用"
                        }
                        //把返回的json数据显示在div,实现局部刷新
                        var elementById3 = document.getElementById("div1");
                        elementById3.innerText = responseText;
                    }
                }

                //发送,如果是get请求则直接发送,如果是post请求,则在里面放入内容
                xmlHttpRequest.send();

            }
        }
    </script>
</head>
<body>
<h1>用户注册</h1>
<form action="/ajax/checkUserServlet" method="post">
    用户名字:<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>
11.UserService.java
package service;

import dao.UserDao;
import entity.User;

/**
 * @author 孙显圣
 * @version 1.0
 */
public class UserService {
    private UserDao userDao = new UserDao();
    public User getUserByName(String username) {
        User user = userDao.querySingle("select * from `user` where username=?", User.class, username);
        return user;
    }
}

12.CheckUserServlet.java
package servlet;

import com.google.gson.Gson;
import dao.UserDao;
import entity.User;
import org.junit.Test;
import 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
 */
@WebServlet("/checkUserServlet")
public class CheckUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String uname = req.getParameter("uname");
        //根据姓名从数据库查询
        UserService userService = new UserService();
        User user = userService.getUserByName(uname);
        if (user != null) {
            //如果查询到了信息则将用户信息使用json的形式发送到前端
            Gson gson = new Gson();
            String json = gson.toJson(user);
            resp.setContentType("text/html;charset=utf-8");
            resp.getWriter().print(json);
        }
        else {
            resp.getWriter().print("");
        }

    }

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

13.结果

image-20240203113735301

14.完整文件目录

image-20240203113814667

5.jQuery操作Ajax

1.原生Ajax请求问题分析

image-20240203114931527

2.Ajax函数基本介绍

image-20240203134818417

image-20240203135307131

image-20240203135555236

3.jQuery $.ajax应用实例(在前面项目基础上)
1.login2.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //给按钮绑定事件
      $("#btn1").click(function () {
        //使用$.ajax({})方法向服务器发送请求
        $.ajax({
          url: "/ajax/checkUserServlet2",
          type: "get",
          data: {
            username: $("#uname").val(),
            date: new Date()
          },
          success: function (data, status, xhr) {
            console.log("成功")
            console.log("data=" , data)
            console.log("status=" + status)
            console.log("xhr=" , xhr)
            //对返回的结果进行处理
            //绑定显示信息的按钮和div
            var $myres = $("#myres");
            var $div1 = $("#div1");
            if (data.id == -1) { //说明数据不在数据库中
              $myres.val("用户不可用!")
            }
            else { //用户在数据库中
              $myres.val("用户可用!")
              //在div显示数据,需要将json对象转换成字符串
              $div1.text(JSON.stringify(data))
            }
          },
          error: function () {
            console.log("失败")
          },
          dataType: "json"
        })
      })
    })
  </script>
</head>
<body>
<h1>用户注册-jQuery + Ajax</h1>
<form action="/ajax/checkUserServlet2" 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" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>
2.checkUserServlet2.java
package service;

import com.google.gson.Gson;
import entity.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
 */
@WebServlet("/checkUserServlet2")
public class CheckUserServlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        System.out.println(username);
        //从数据库中查找信息,如果查到则以json格式响应信息
        User user = new UserService().getUserByName(username);
        //设置返回类型为json
        resp.setContentType("text/json;charset=utf-8");
        Gson gson = new Gson();
        if (user != null) {
            //返回信息
            resp.getWriter().print(gson.toJson(user));
        } else {
            User user1 = new User(-1, "", "", "");
            //返回信息
            resp.getWriter().print(gson.toJson(user1));
        }

    }

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

4.jQuery $.get应用实例
1.注意参数的顺序

image-20240203135307131

2.代码实例
        //使用$.get()方法
        $.get(
                "/ajax/checkUserServlet2",
                {
                  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)
                  //对返回的结果进行处理
                  //绑定显示信息的按钮和div
                  var $myres = $("#myres");
                  var $div1 = $("#div1");
                  if (data.id == -1) { //说明数据不在数据库中
                    $myres.val("用户不可用!")
                  }
                  else { //用户在数据库中
                    $myres.val("用户可用!")
                    //在div显示数据,需要将json对象转换成字符串
                    $div1.text(JSON.stringify(data))
                  }
                },
                "json",
        )
5.jQuery $.post应用实例
1.get和post的调用方式是一样的
2.代码实例
        $.post(
                "/ajax/checkUserServlet2",
                {
                  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)
                  //对返回的结果进行处理
                  //绑定显示信息的按钮和div
                  var $myres = $("#myres");
                  var $div1 = $("#div1");
                  if (data.id == -1) { //说明数据不在数据库中
                    $myres.val("用户不可用!")
                  }
                  else { //用户在数据库中
                    $myres.val("用户可用!")
                    //在div显示数据,需要将json对象转换成字符串
                    $div1.text(JSON.stringify(data))
                  }
                },
                "json",
        )
6.jQuery $.getJSON应用实例
1.如果是get请求,并且要求响应的是json类型,则直接使用getJSON函数即可,只有三个参数url、data、回调函数
2.代码实例
        //注意:这样返回的对象就是json对象,会自动将java中的json字符串转换成json对象
        $.getJSON(
                "/ajax/checkUserServlet2",
                {
                  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)
                  //对返回的结果进行处理
                  //绑定显示信息的按钮和div
                  var $myres = $("#myres");
                  var $div1 = $("#div1");
                  if (data.id == -1) { //说明数据不在数据库中
                    $myres.val("用户不可用!")
                  }
                  else { //用户在数据库中
                    $myres.val("用户可用!")
                    //在div显示数据,需要将json对象转换成字符串
                    $div1.text(JSON.stringify(data))
                  }
                },
        )

6.JSON与Ajax小结

1.关于java中的JSON
1.JSON中的key都是String
2.一个javabean,map都是一个JSON对象
  1. javabean的属性是key,值是value
  2. map就是key,value格式的
3.list是一个数组
  1. 如果里面是javabean对象,就是一个JSON对象数组
  2. 如果是普通的元素就是普通数组
4.关于value在java中可以选择的类型
  • String
  • Number
  • Boolean
  • Object
2.关于JQuery操作Ajax
使用$.getJSON,会将java中返回的json字符串自动转换为json对象返回
            //用户名绑定失去焦点事件
            $("#username").blur(function () {
                //获取信息,并向后端发送ajax请求
                var username = $(this).val();
                $.getJSON(
                    "memberServlet",
                    {
                        "action": "isExistName",
                        "username": username
                    },
                    function (data, status, xhr) {
                        //根据是否存在显示信息
                        if (data.isExist) {
                            $("span.errorMsg").text("用户名已存在!");
                        } else {
                            $("span.errorMsg").text("用户名可用!");
                        }
                    }
                )
            })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/537369.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一些优雅的算法(c++)

求最大公约数&#xff1a;辗转相除法 int gcd(int a,int b){return b0?a:gcd(b,a%b); }求最小公倍数&#xff1a;两整数之积除以最大公约数 int lcm(int a, int b){return a*b / gcd(a, b); }十进制转n进制&#xff1a; char get(int x){if(x<9){return x0;}else{return…

【Mybatis-Plus】Mybatis-Plus增删改查示例

示例一&#xff1a;delete 这个删除&#xff0c;是我们直接可以把这条记录给放进去&#xff0c;那么这条记录里面如果说有的属性为空的话&#xff0c;它是不会去管的&#xff0c;但是有些属性它不为空的话&#xff0c;那么它就会根据属性。作为一个equal的条件去做一个删除的一…

Android性能优化RecyclerView预加载LayoutManager的getExtraLayoutSpace,Kotlin

Android性能优化RecyclerView预加载LayoutManager的getExtraLayoutSpace&#xff0c;Kotlin RecyclerView默认只加载当前屏幕肉眼可见区域的有限item数量&#xff0c;有些场景下&#xff0c;需要在屏幕外不可见的区域多加载一批item出来&#xff0c;这有时候被称之为“预加载”…

Docker Desktop修改镜像存储路径 Docker Desktop Start ... 卡死

1、CMD执行wsl -l -v --all 2、Clean / Purge data 3、导出wsl子系统镜像: wsl --export docker-desktop D:\docker\wsl\distro\docker-desktop.tar wsl --export docker-desktop-data D:\docker\wsl\data\docker-desktop-data.tar4、删除现有的wsl子系统&#xff1a; wsl -…

微创全飞秒进校园,爱尔眼健康公益行——四川农业大学站即将开启!

据研究数据显示&#xff0c;我国儿童和青少年人口近视发生率超过53%&#xff0c;大学生近视发生率超过90%。因此&#xff0c;近视防控和近视科学普及目前来看仍是一项非常重要的工作&#xff0c;这也体现在了国家规划之中。 为贯彻落实“十四五”眼健康规划&#xff0c;普及眼…

mybatis LIKE 查询时 $、# sql注入问题分析

先说结论&#xff1a; 1. 存在 sql 注入安全问题&#xff1a; SELECT fd_userid,fd_nickname FROM tb_user WHERE fd_nickname LIKE %${value}% 2. 不存在 sql 注入安全问题&#xff1a; SELECT fd_userid,fd_nickname FROM tb_user WHERE fd_nickname LIKE CONCAT(…

数据结构—顺序表(如果想知道顺序表的全部基础知识点,那么只看这一篇就足够了!)

前言&#xff1a;学习完了C语言的基础知识点之后&#xff0c;我们就需要使用我们所学的知识来进一步对存储在内存中的数据进行操作&#xff0c;这时候我们就需要学习数据结构。而这篇文章为数据结构中顺序表的讲解。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以…

JS控制元素平滑滚动,页面自动滚动锚点实现

使用 scrollIntoView 实现元素内子元素的平滑滚动&#xff0c; 下面是模拟接口list返回&#xff0c;然后通过按钮切换下一个&#xff0c;页面就会滚动到响应的位置 具体 scrollIntoView 有一些其他参数来配置滚动的具体交换&#xff0c;网上去查即可 备注&#xff1a;下面的代码…

uniapp 编译后分包下静态图片404问题解决方案

如上图官方说明&#xff1a; 在分包下建立一个static文件夹即可&#xff1a; 分包内代码引用图片 <image src"/分包名称/img/图片名称"></image> <image src"/dataView/img/图片名称"></image>

Centos中一些有趣的命令

目录 1.sl 小火车 2. cowsay 会说话的牛 3.toilet/figlet 图形化输出 4.aafire 小火焰 5.linux_logo 显示系统logo 1.sl 小火车 yum install sl 2. cowsay 会说话的牛 yum install cowsay 3.toilet/figlet 图形化输出 yum install toilet yum install figlet 4.aafire 小火…

Python打造的智能家居神器:Home Assistant

引言 在数字化时代&#xff0c;智能家居系统越来越多地融入我们的生活。而为了打造一个安全、可控、高效的智能家庭环境&#xff0c;一个优秀的开源智能家居控制平台至关重要。Home Assistant以Python为开发语言&#xff0c;遵循开放源代码协议&#xff0c;专注于本地控制与隐私…

别让这6个UI设计雷区毁了你的APP!

一款成功的APP不仅仅取决于其功能性&#xff0c;更取决于用户体验&#xff0c;这其中&#xff0c;UI设计又至关重要。优秀的UI设计能够为用户带来直观、愉悦的交互体验&#xff0c;甚至让用户“一见钟情”&#xff0c;从而大大提高产品吸引力。 然而&#xff0c;有很多设计师在…

OpenHarmony 资源调度之内存管理源码分析

作者&#xff1a;张守忠 1 内存管理简介 内存管理部件位于全局资源调度管控子系统中&#xff0c;基于应用的生命周期状态&#xff0c;更新进程回收优先级列表&#xff0c;通过内存回收、查杀等手段管理系统内存&#xff0c;保障内存供给。 1.1 内存管理框架 内存管理部件主要…

【Linux】编写并运行Shell脚本程序操作实例

关于Shell脚本的介绍&#xff1a; Shell脚本是一种用于自动化任务和简化常见操作的脚本语言&#xff0c;通常用于Linux和Unix环境中。Shell脚本允许用户通过编写一系列命令和逻辑语句来执行一系列任务&#xff0c;从而提高了工作效率和自动化水平。 以下是关于Shell脚本的详细…

OSCP靶场--ZenPhoto

OSCP靶场–ZenPhoto 考点(Zenphoto < 1.4.1.4 RCE CVE-2010-3904提权) 1.nmap扫描 ## ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.158.41 -sV -sC -Pn --min-rate 2500 -p- Starting Nmap 7.92 ( https://nmap.org ) at 2024-04-11 21:14 EDT Warning: 192.16…

2024 年 3 月编程语言排行榜,Python 与其他语言之间的差距从未如此之大!

TIOBE 2024 年 3 月份的编程语言排行榜已经公布&#xff0c;官方的标题是&#xff1a;Python 与其他语言之间的差距从未如此之大&#xff08;The gap between Python and the rest has never been that large&#xff09; TIOBE 指数在二月份呈现出了相对平静的态势&#xff0…

QtCreator修改项目构建目录

文章目录 QtCreator修改项目构建目录问题描述方法一方法二 QtCreator修改项目构建目录 使用QtCreator编译Qt项目时&#xff0c;如有需求修改编译过程文件&#xff08;即Makefile、.o、.exe等文件&#xff09;存放目录&#xff0c;简单在工具–>选项–>构建和运行中修改D…

NCBI 数据下载

网上介绍的那几种直接下载NCBI数据的方法大都下载速度很慢&#xff0c;但是EBI (European Bioinformatics Institute) 下载很快&#xff0c;而且它的数据库和NCBI是共享的&#xff0c;所以我们可以直接从 EBI 下载。 1 、 确定要下载的 SRA 编号&#xff1b; 2 、 EBI (https…

每日一题---OJ题: 返回倒数第 k 个节点

片头 嗨! 小伙伴们,大家好! 今天我们来一起学习这道OJ题---返回倒数第k个结点,准备好了吗? 我们开始咯! 比如: 总共有5个结点,分别为 1->2->3->4->5 , 找倒数第一个结点,也就是"5" 题目很容易理解,我们先提供第一种思路 思路一: 假设链表长度为 n ,…

Execute-Assembly(3)

绕过检测 绕过前面检测的最简单的思路就是Patch ETW。而我想的是使用BOF进行Bypass ETW 以及Assembly加载。值得庆幸得是CobaltStrike官方以及有大佬已经做了这一部分的研究。 脚本学习 在官方的文档Beacon Object Files中&#xff0c;详细描写了怎么使用CNA和BOF。根据文档提供…