Ajax技术详解

图图图图爱睡觉

于 2024-08-21 21:16:19 发布

阅读量448

点赞数 17

文章标签： ajax okhttp android

本文链接：https://blog.csdn.net/m0_73852099/article/details/141399713

版权

Ajax简介

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

为什么要使用Ajax技术

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

Ajax的应用场景

用户名检测

注册用户时，通过 Ajax 的形式，动态检测用户名是否被占用。
在这里插入图片描述

搜索提示

当输入搜索关键字时，通过 Ajax 的形式，动态加载搜索提示列表。
在这里插入图片描述

数据分页显示

当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据。
在这里插入图片描述

数据的增删改查

**数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互。
**

JSON简介

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

为什么要使用JSON

在这里插入图片描述

XML简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。
比如说我有一个学生数据： name = “zhangsan” ; age = 22; gender = “男” ;
用 XML 表示：

<student>
 <name>zhangsan</name>
 <age>22</age>
 <gender>男</gender>
</student>

用 JSON 表示：

{
 "name":"zhangsan",
 "age":22,
 "gender":"男"
}

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

JSON格式的特征

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

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

JSON的6种数据类型

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

FastJson是什么

Fastjson 是阿里巴巴的开源JSON解析库，它可以解析 JSON 格式的字符串，支持将 Java Bean 序列化为 JSON 字符串，也可以从 JSON 字符串反序列化到 JavaBean。

Fastjson使用场景

Fastjson已经被广泛使用在各种场景，包括cache存储、RPC通讯、MQ通讯、网络协议通讯、Android客户端、Ajax服务器处理程序等等。

FastJson优点

1、速度快
Fastjson相对其他JSON库的特点是快，从2011年fastjson发布1.1.x版本之后，其性能从未被其他Java实现的JSON库超越。
2、使用广泛
Fastjson在阿里巴巴大规模使用，在数万台服务器上部署，Fastjson在业界被广泛接受。在2012年被开源中国评选为最受欢迎
的国产开源软件之一。
3、测试完备
fastjson有非常多的testcase，在1.2.11版本中，testcase超过3321个。每次发布都会进行回归测试，保证质量稳定。

常用的 JSON 解析类库

Gson: 谷歌开发的 JSON 库，功能十分全面
FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。
Jackson: 社区十分活跃且更新速度很快。被称为“最好的Json解析器”

下载和使用FastJson

序列化和反序列化Java对象

使用FastJson将Java对象序列化为JSON字符串很简单，只需要调用FastJson提供的静态方法JSON.toJSONString()。

User user = new User();
user.setId(1);
user.setName("张三");
user.setAge(18);
String jsonStr = JSON.toJSONString(user);
System.out.println(jsonStr);
System.out.println(jsonStr);

使用FastJson将JSON字符串反序列化为Java对象也很简单，只需要调用FastJson提供的静态方法JSON.parseObject()。

String jsonStr = "{\"id\":1,\"name\":\"张三
\",\"age\":18}";
User user = JSON.parseObject(jsonStr, 
User.class);
System.out.println(user);

解析JSON字符串

FastJson提供了一个JSON类，可以方便地解析JSON字符串。

String jsonStr = "{\"id\":1,\"name\":\"张三\",\"age\":18}";JSONObject jsonObject = JSON.parseObject(jsonStr);
int id = jsonObject.getIntValue("id");
String name = jsonObject.getString("name");
int age = jsonObject.getIntValue("age");
System.out.println(id + ", " + name + ", " + age);

使用注解控制序列化和反序列化
FastJson提供了一些注解，可以用于控制序列化和反序列化。@JSONField注解指定了JSON字段的名称、是否序列化、日期格式等属性。

public class User {
 @JSONField(name = "userId")    private int id;
  @JSONField(serialize = false)    private String name;
  @JSONField(format = "yyyy-MM-dd HH:mm:ss")    
  private Date birthday;
  // getter和setter方法
}

Ajax初体验

在这里插入图片描述

XMLHttpRequest对象

通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获取数据。然后JavaScript来操作DOM而更新页面。
XMLHttpRequest是ajax的核心机制，它是IE5中首先引入的，是一种支持异步请求的技术。
也就是JavaScript可以及时的向服务器提出请求并及时响应。而不阻塞用户。达到无刷新效果。

Ajax的使用步骤

创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

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

xhr.open("get","http://v1.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=");

后端服务 ip地址+端口号+资源路径

发送请求

xhr.send();

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

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

Ajax实战案例_需求说明

在这里插入图片描述

需求

创建User类，包含id、name、age属性
在用户管理页面中通过Ajax技术完成对用户数据载入、添加用户、更新用户、删除用户操作。

项目结构

在这里插入图片描述

common（公共实体）：用于存放公共实体类。
dao（数据访问层）：用于存放应用程序的数据访问类，负责与数据库或其他数据源进行交互。
pojo（模型层）：用于存放应用程序的数据模型类，表示应用程序中的实体对象。
service（服务层）：用于存放应用程序的服务类，负责实现业务逻辑。
servlet （控制器层）：用于存放应用程序的控制器类，负责处理请求和控制应用程序的流程。
utils（工具类）：用于存放应用程序的工具类，包含各种通用的辅助方法。

Ajax实战案例_搭建环境

数据库创建用户表

# 创建用户表
CREATE TABLE `user` (  `id` int NOT NULL AUTO_INCREMENT,  
`name` varchar(255) DEFAULT NULL,  
`age` int DEFAULT NULL, 
 PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

DELETE FROM `user`;
# 添加用户
INSERT INTO `user` (id, name, age) VALUES
(1, 'Jone', 18),(2, 'Jack', 20),(3, 'Tom', 28),(4, 'Sandy', 21),(5, 'Billie', 24);

编写实体类
编写实体类 User.java

/** 
* 用户表模型
*  */
public class User {
// 序号    
private Integer id;    
// 名字    
private String name;    
// 年龄
private Integer age;    
// 邮箱
  public User(Integer id, String name, Integer age, String email) {        
  this.id = id;        
  this.name = name;        
  this.age = age;    }
  public User() {    }
   public Integer getId() {        
   return id;    }
   public void setId(Integer id) {        
   this.id = id;    }
    public String getName() {        
    return name;    }
     public Integer getAge() {        
     return age;    }
     public void setAge(Integer age) {        
     this.age = age;    }
      @Override    
      public String toString() {        
      return "User{" +                
      "id=" + id +                
      ", name='" + name + '\'' +                
      ", age=" + age +                
      '}';    
   }
 }

统一结果返回集

public class ResultAjax {
 // 返回静态码    
 private Integer code ;
 // 返回消息体    
 private String message;
  // 返回数据    
  private Object data;
  public ResultAjax() {    
   }
   public ResultAjax(Integer code, String message, Object data) {        
   this.code = code;        
   this.message = message;        
   this.data = data;    }
   public Integer getCode() {        
   return code;    }
   public void setCode(Integer code) {        
   this.code = code;    }
    public String getMessage() {        
    return message;    }
    public void setMessage(String message) {        
    this.message = message;    }
    public Object getData() {        
    return data;    }
    public void setData(Object data) {        
    this.data = data;    }
    public static ResultAjax success(String message){        
    return new ResultAjax(200,message,null);    }
    public static ResultAjax success(Object object){        
    return new ResultAjax(200,"success",object);    }
    public static ResultAjax error(String message){        
    return new ResultAjax(500,message,null);    }
    }

Ajax实战案例_编写据库连接工具##

创建数据库连接信息文件

在src目录下创建 druid.properties ,基于Druid连接池获取数据库连接工具类。

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/test?useSSL=falseusername=root
password=123456
initialSize=10
maxActive=20

工具类

/**
 * 数据库连接工具类
 */
public class JdbcUtils {

    // 数据库连接池对象
    private static DataSource dataSource;


    static {
        try {
            // 读取配置文件字节输入流对象
            InputStream is = JdbcUtils.class.getClassLoader().getResourceAsStream("druid.properties");
            // 创建properties对象
            Properties properties = new Properties();
            // 加载配置文件
            properties.load(is);
            // 创建出连接池对象
            dataSource = DruidDataSourceFactory.createDataSource(properties);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


    // 获取数据库连接对象
    public static Connection getConnection(){
        Connection connection = null;
        try {
            connection = dataSource.getConnection();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
        return connection;
    }


    // 关闭连接对象
    public static void closeConnection(Connection connection){
        if (connection != null){
            try {
                connection.close();
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
    }


    // 释放资源
    public static void closeResource(Connection connection, Statement statement) throws SQLException {
        // 先关闭statement
        if (statement != null){
            statement.close();
        }
        // 在关闭connection
        if (connection != null){
            connection.close();
        }

    }


}

Ajax实战案例_ 后端实现查询用户数据

用户持久层新增查询接口

新建用户持久层文件UsersDao接口。

/**
     * 查询所有用户数据
     * @return
     */
    List<User> findByAll();

用户持久层实现查询接口

新建用户持久层接口实现类UsersDaoImpl接口。

/**
 * 用户持久实现类
 */
public class UserDaoImpl implements UserDao {


    /**
     * 查询所有用户
     * @return
     */
    @Override
    public List<User> findByAll() {
        Connection connection = null;
        Statement statement = null;
        List<User> users = new ArrayList<>();
        try {
            // 获取数据连接
            connection = JdbcUtils.getConnection();
            // 创建statement
            statement = connection.createStatement();
            // 编写查询sql语句
            String sql = "select * from user";
            // 执行
            ResultSet resultSet = statement.executeQuery(sql);
            // 拿出来数据
            while (resultSet.next()){
                User user = new User();
                // 序号
                int id = resultSet.getInt("id");
                // 名字
                String name = resultSet.getString("name");
                // 年纪
                int age = resultSet.getInt("age");
                user.setId(id);
                user.setName(name);
                user.setAge(age);
                users.add(user);
            }
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }finally {
            try {
                JdbcUtils.closeResource(connection,statement);
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
        return users;
    }

Ajax实战案例_ 编写用户管理前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <style>
        div{
            padding: 20px 10px 0 10px;
        }
        .total_conent{
            /*创建弹性盒子部署*/
            display: flex;
            /*水平居中布局*/
            justify-content: center;
            /*垂直居中对其*/
            align-items: center;
        }

    </style>
</head>
<body>

<div class="total_conent">
    <h1>用户管理系统</h1>
</div>

<div>
    <table align="center" width="60%" border="1">
        <tr>
            <td>ID:</td>
            <td><input type="text" name="id" id="UserId"></td>
            <td>名字：</td>
            <td><input type="text" name="name" id="name" placeholder="请输入名字"></td>
            <td>年龄：</td>
            <td><input type="number" name="age" id="age" placeholder="请输入年龄"></td>
        </tr>
        <tr align="center" >
            <td colspan="6"><button onclick="save()">添加用户</button><button onclick="userupdate()">更新用户</button></td>
        </tr>
    </table>
    <hr>
    <table align="center" width="60%" border="1" id="myTable">
        <tr>
            <td>ID</td>
            <td>名字</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>

    </table>
</div>
</body>
</html>

Ajax实战案例_ 编写用户查询Servlet

在这里插入图片描述

用户业务层新增查询接口

创建用户业务层接口类UsersService。

public interface UsersService {      
/**     
* 查询所有数据     
* @return     
*/   
 List<User> findByAll();}

用户业务层实现查询接口实现类

创建用户业务层接口实现类UsersServiceImpl。

public class UserServiceImpl implements IUserService {

    /**
     * 查询所有用户
     * @return
     */
    @Override
    public List<User> findByAll() {
        UserDao userDao = new UserDaoImpl();
        return userDao.findByAll();
    }

用户查询控制层编写

创建UserListServlet控制器类

@WebServlet("/user.do")
public class UserListServlet extends HttpServlet {
 @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");        
 switch (flag){            
 case "getData":                
  this.getData(req,resp);               
   break;        
   }    
   }        
   // 获取页面初始化数据   
    private void getData(HttpServletRequest req, HttpServletResponse resp) throws IOException {        
    UsersService usersService = new UsersServiceImpl();       
     List<User> userList = usersService.findByAll();        
     ResultAjax success = ResultAjax.success(userList);        writerTopage(resp,success);    
     }       
     /**     
     *输出至页面方法     
     * @param resp     
     * @param data     
     *  @throws IOException
     */
     
     private void writerTopage(HttpServletResponse resp,Object data) throws IOException {        
     String s = JSON.toJSONString(data);            resp.setContentType("application/json");        
     resp.setCharacterEncoding("UTF-8");        
     PrintWriter pw = resp.getWriter();        
     pw.print(s);        
     pw.flush();        
     pw.close();    }  }

Ajax实战案例_前端实现显示用户数据

在这里插入图片描述

Jquery的Ajax使用

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

jQuery的宗旨：写的更少，做得更多！jQuery官网地址：http://jquery.com/

最常用的三种方法如下：

$ .get() 向服务器获取数据
$ .post() 向服务器发送请求
$ .ajax()既可以获取也可以发送数据

实战用户查询功能

引入jquery-3.6.0.js

<script type="text/javascript" src="js/jquery-3.6.0.js"></script>

初始化页面

<script>    
   $(function() {        
   //初始化用户数据        
   getData();    
   }); 
</script>

发送get请求获取数据

<script>    
    $(function() {        
      //初始化用户数据        
      getData();    
   }); 

// 获取页面初始化数据    
function getData(){       
   $.getJSON(
   "user.do",
   {flag:"getData"},function (result) {            
   listUser(result);        
   });    
}</script>

渲染数据

<script>    
  $(function() {        
  //初始化用户数据        
  getData();    
 }); 

// 获取页面初始化数据    
function getData(){        
 $.getJSON("user.do",
 {flag:"getData"},function (result) {            
 listUser(result);
 });    
 }

// 遍历数据生成数据    
function listUser(obj){        
var str ="";        
$.each(obj.data,function(){            
str+= "<tr align='center' bgcolor=\"#FFFFFF\">" +                
"<td id='"+this.id+"'>"+this.id +"</td>"+                
"<td>"+this.name+"</td>" +                
"<td>"+this.age+"</td>" +                
"<td><a href='#' >更新</a>&nbsp;&nbsp;<a href='#'>删除 </a></td></tr>"        
});        
$("#tBody").prepend(str);    
}</script>

Ajax实战案例_后端实现添加用户数据

用户持久层添加用户接口

新建用户持久层文件UsersDao接口。

 /**
     * 添加用户
     * @param user
     * @return
     */
    Integer save(User user);

用户持久层实现添加接口

新建用户持久层接口实现类UsersDaoImpl接口。

public class UserDaoImpl implements UserDao {
/**
     * 添加用户   谁可以操作数据库    持久层  dao
     * @param user
     * @return
     */
    @Override
    public Integer save(User user) {
        // 获取连接
        Connection connection = null ;
        PreparedStatement ps = null;
        String sql = "insert into user (name , age) value(?,?)";
        Integer result = 0;
        try {
            connection = JdbcUtils.getConnection();
            ps = connection.prepareStatement(sql);
            ps.setString(1,user.getName());
            ps.setInt(2,user.getAge());
            result =  ps.executeUpdate();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }finally {
            try {
                JdbcUtils.closeResource(connection,ps);
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
        return result;
    }
    }

用户业务层新增添加接口

创建用户业务层接口类UsersService。

**
     * 添加用户
     * @param user
     * @return
     */
    Integer save(User user);

用户业务层实现查询接口实现类

创建用户业务层接口实现类UsersServiceImpl。

/**
 * 用户业务层实现类   控制层 -》 业务层  -》 持久层
 */
public class UserServiceImpl implements IUserService {
 /**
     * 添加用户
     * @param user
     * @return
     */
    @Override
    public Integer save(User user) {
        UserDao userDao = new UserDaoImpl();
        return userDao.save(user);
    }

用户查询控制层编写

创建UserListServlet控制器类


package com.itbaizhan.servlet;
import com.alibaba.fastjson.JSON;
import com.itbaizhan.common.ResultAjax;
import com.itbaizhan.pojo.User;
import com.itbaizhan.service.IUserService;
import com.itbaizhan.service.impl.UserServiceImpl;

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

@WebServlet("/user.do")
public class UserListServlet1 extends HttpServlet {
    

    @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");
        switch (flag){
            case "getData":
                this.getData(req,resp);
                break;
        }
    }


    // 获取页面初始化数据
    private void getData(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        IUserService usersService = new UserServiceImpl();
        List<User> userList = usersService.findByAll();
        ResultAjax success = ResultAjax.success(userList);
        writerTopage(resp,success);
    }

    /**
     * 输出至页面方法
     * @param resp
     * @param data
     * @throws IOException
     */
    private void writerTopage(HttpServletResponse resp,Object data) throws IOException {
        String s = JSON.toJSONString(data);
        resp.setContentType("application/json");
        resp.setCharacterEncoding("UTF-8");
        PrintWriter pw = resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }

}
/**     
* 处理添加用户请求
* @param req     
* @param resp     
*  @throws ServletException     
* @throws IOException     
*/    private void addUser(HttpServletRequest req, HttpServletResponse resp) throws IOException {        
User user = this.createUser(req);        
UsersService usersService = new UsersServiceImpl();        
int save = usersService.save(user);        
if (save > 0){            
writerTopage(resp,ResultAjax.success("添加成功"));        
}else {            
writerTopage(resp,ResultAjax.error("添加成功"));        
}    
}  }

Ajax实战案例_前端实现新增用户数据

创建添加用户事件

// 添加用户
    function addUser(){
        // 1、获取用户名
        var name = $("#name").val()
        if (name == ''){
            alert("请输入名字")
            return
        }
        // 2、获取用户年纪
        var age = $("#age").val()
        if (age == ''){
            alert("请输入年龄")
            return
        }

        var data = {
            name:name,
            age:age,
            flag:"save"
        }
//发送请求
        $.getJSON("user.do",data,function (result){
            if (result.code == 200){
                alert("添加成功")
                location.reload()
            }
        })
    }

绑定事件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <style>
        div{
            padding: 20px 10px 0 10px;
        }
        .total_conent{
            /*创建弹性盒子部署*/
            display: flex;
            /*水平居中布局*/
            justify-content: center;
            /*垂直居中对其*/
            align-items: center;
        }

    </style>
</head>
<body>

<div class="total_conent">
    <h1>用户管理系统</h1>
</div>

<div>
    <table align="center" width="60%" border="1">
        <tr>
            <td>ID:</td>
            <td><input type="text" name="id" id="UserId"></td>
            <td>名字：</td>
            <td><input type="text" name="name" id="name" placeholder="请输入名字"></td>
            <td>年龄：</td>
            <td><input type="number" name="age" id="age" placeholder="请输入年龄"></td>
        </tr>
        <tr align="center" >
            <td colspan="6"><button onclick="save()">添加用户</button><button onclick="userupdate()">更新用户</button></td>
        </tr>
    </table>
    <hr>
    <table align="center" width="60%" border="1" id="myTable">
        <tr>
            <td>ID</td>
            <td>名字</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>

    </table>
</div>
</body>

Ajax实战案例_后端实现更新用户数据

用户持久层更新用户接口

新建用户持久层文件UsersDao接口。

/**
     * 根据用户id查询用户信息
     * @param id 用户id
     * @return
     */
    User findById(Integer id);

/**
     * 根据用户id更新用户数据
     * @param user
     * @return
     */
    Integer updateById(User user);

用户持久层实现更新接口

新建用户持久层接口实现类UsersDaoImpl接口。

/**
     * 根据用户id查询用户
     * @param id 用户id
     * @return
     */
    @Override
    public User findById(Integer id) {
        User user = null;
        Connection connection = null;
        PreparedStatement ps = null;
        try {
            // 1、创建连接
            connection = JdbcUtils.getConnection();
            String sql = "select * from user where id = ?";
            ps = connection.prepareStatement(sql);
            ps.setInt(1,id);
            // 2、执行sql语句
            ResultSet resultSet = ps.executeQuery();
            // 3、获取数据
            while (resultSet.next()){
                user = new User();
                Integer userid = resultSet.getInt("id");
                String name = resultSet.getString("name");
                int age = resultSet.getInt("age");
                user.setId(userid);
                user.setName(name);
                user.setAge(age);
            }
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }finally {
            try {
                JdbcUtils.closeResource(connection,ps);
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
        return user;
    }


    /**
     * 根据用户id更新用户信息
     * @param user
     * @return
     */
    @Override
    public Integer updateById(User user) {
        Connection connection = null;
        PreparedStatement ps = null;
        int result = 0;
        try {
            // 1、创建连接
            connection = JdbcUtils.getConnection();
            String sql = "update user set name = ? , age = ?  where id = ?";
            ps = connection.prepareStatement(sql);
            ps.setString(1,user.getName());
            ps.setInt(2,user.getAge());
            ps.setInt(3,user.getId());
            // 2、发送语句
            result = ps.executeUpdate();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }finally {
            try {
                JdbcUtils.closeResource(connection,ps);
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
        return result;
    }

用户业务层新增添加接口

创建用户业务层接口类UsersService。

  /**
     * 添加用户
     * @param user
     * @return
     */
    Integer save(User user);

用户业务层实现查询接口实现类

创建用户业务层接口实现类UsersServiceImpl。

public class UserServiceImpl implements IUserService {
 /**
     * 添加用户
     * @param user
     * @return
     */
    @Override
    public Integer save(User user) {
        UserDao userDao = new UserDaoImpl();
        return userDao.save(user);
    }
}

Ajax实战案例_用户更新控制层Servlet编写

创建UserListServlet控制器类

@WebServlet("/user.do")
public class UserListServlet extends HttpServlet {




  @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");
    switch (flag){
      case "updateUser":
        this.updateUser(req,resp);
        break
      case "findByUserId":
        this.getUserId(req,resp);
        break;   
     }
   }
 
 
  // 获取页面初始化数据
  private void getData(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    UsersService usersService = new UsersServiceImpl();
    List<User> userList = usersService.findByAll();
    ResultAjax success = ResultAjax.success(userList);
    writerTopage(resp,success);
   }
 
 
  // 获取页面初始化数据
  private void getUserId(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    Integer id = Integer.valueOf(req.getParameter("id"));
    if (id == null){
      writerTopage(resp,ResultAjax.error("查询用户，用户id为空"));
      return;
     }
    UsersService usersService = new UsersServiceImpl();
    User usersById = usersService.findUsersById(id);
    writerTopage(resp,ResultAjax.success(usersById));
   }
 
  /**
   * 处理更新用户请求
   * @param req
   * @param resp
   * @throws IOException
   */
  private void updateUser(HttpServletRequest req,
              HttpServletResponse resp) throws IOException{
    // 获取用户信息
    User user = createUser(req);
    UsersService usersService = new UsersServiceImpl();
    // 根据用户id更新用户
    int i = usersService.updateByUser(user);
    if (i > 0){
      writerTopage(resp,ResultAjax.success("更新成功"));
     }else {
      writerTopage(resp,ResultAjax.error("更新失败"));
     }


   }
}

前端实现更新用户数据

创建更新用户数据事件



  // 更新之前的数据选择
  function preUpdateUser(userid){
    $.post("user.do",{id:userid,flag:"findByUserId"},function(result){
      if (result.code == 200){
        console.log(result)
        $("#userId").val(result.data.id);
        $("#name").val(result.data.name);
        $("#age").val(result.data.age);
       }
     })
   }


 // 用户更新
  function updateUser(){
    // 从页面中获取数据
    var userId = $("#userId").val();
    var name = $("#name").val();
    var age = $("#age").val();
    var data = {
      id : userId,
      name:name,
      age:age,
      flag:"updateUser"
     }
    // 发送请求
    $.post("user.do",data,function(result){
      console.log(result)
      if (result.code == 200){
        alert(result.message)
        location.reload()
       }
     });
   }

绑定事件

 // 遍历数据生成数据
  function listUser(obj){
    var str ="";
    $.each(obj.data,function(){
      str+= "<tr align='center' bgcolor=\"#FFFFFF\">" +
        "<td id='"+this.id+"'>"+this.id +"</td>"+
        "<td>"+this.name+"</td>" +
        "<td>"+this.age+"</td>" +
        "<td><a href='#' οnclick='preUpdateUser("+this.id+")'>更新</a>&nbsp;&nbsp;<a href='#' >删除 </a></td></tr>"
     });
    $("#tBody").prepend(str);
   }

Ajax实战案例_后端实现删除用户数据

用户持久层删除用户接口
新建用户持久层文件UsersDao接口。

 /**
     * 根据用户id删除用户
     * @param id
     * @return
     */
    Integer deleteById(Integer id);

用户持久层实现删除接口
新建用户持久层接口实现类UsersDaoImpl接口。

/**
 * 操作用户表持久层
 */
public class UsersDaoImpl implements UsersDao {  
 
   /**
   * 根据用户id删除用户
   * @param id 用户id
   * @return
   */
  @Override
  public int deleteById(Integer id) {
    Connection conn =null;
    PreparedStatement ps = null;
    ResultSet rs = null;
    try{
      conn = JdbcDruidUtil.getConnection();
      ps = conn.prepareStatement("delete from  user where id = ?");
      ps.setInt(1,id);
      return ps.executeUpdate();
     }catch(Exception e){
      e.printStackTrace();
     }finally{
      JdbcDruidUtil.closeResource(rs,ps,conn);
     }
    return 0;
   }
}

用户业务层删除接口
创建用户业务层接口类UsersService。

public interface UsersService {
 
 /**
   * 根据用户id删除用户
   * @param id 用户id
   * @return
   */
  int deleteById(Integer id);
}

用户持久层实现删除接口

新建用户持久层接口实现类UsersDaoImpl接口。

/**
 * 操作用户表持久层
 */
public class UsersDaoImpl implements UsersDao {  
 
   /**
   * 根据用户id删除用户
   * @param id 用户id
   * @return
   */
  @Override
  public int deleteById(Integer id) {
    Connection conn =null;
    PreparedStatement ps = null;
    ResultSet rs = null;
    try{
      conn = JdbcDruidUtil.getConnection();
      ps = conn.prepareStatement("delete from  user where id = ?");
      ps.setInt(1,id);
      return ps.executeUpdate();
     }catch(Exception e){
      e.printStackTrace();
     }finally{
      JdbcDruidUtil.closeResource(rs,ps,conn);
     }
    return 0;
   }
}

用户业务层删除接口
创建用户业务层接口类UsersService。

public interface UsersService {
 
 /**
   * 根据用户id删除用户
   * @param id 用户id
   * @return
   */
  int deleteById(Integer id);
}

用户业务层实现删除接口实现类
创建用户业务层接口实现类UsersServiceImpl。

/**
 * 用户业务层
 *
 */
public class UsersServiceImpl implements UsersService {
 
 
  /**
   * 根据用户id删除用户
   * @param id
   * @return
   */
  @Override
  public int deleteById(Integer id) {
    UsersDao usersDao = new UsersDaoImpl();
    return usersDao.deleteById(id);
   }
 
}

用户删除控制层编写
创建UserListServlet控制器类

@WebServlet("/user.do")
public class UserListServlet extends HttpServlet {




  @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");
    switch (flag){
      case "getData":
        this.getData(req,resp);
        break;
      case "addUser":
        this.addUser(req,resp);
        break;
      case "updateUser":
        this.updateUser(req,resp);
        break;
      case "delete":
        this.deleteUser(req,resp);
        break;
      case "findByUserId":
        this.getUserId(req,resp);
        break;
     }
   }
 
 
  // 获取页面初始化数据
  private void getData(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    UsersService usersService = new UsersServiceImpl();
    List<User> userList = usersService.findByAll();
    ResultAjax success = ResultAjax.success(userList);
    writerTopage(resp,success);
   }
 
 
   /**
   * 处理添加用户请求
   * @param req
   * @param resp
   * @throws ServletException
   * @throws IOException
   */
  private void addUser(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    User user = this.createUser(req);
    UsersService usersService = new UsersServiceImpl();
    int save = usersService.save(user);
    if (save > 0){
      writerTopage(resp,ResultAjax.success("添加成功"));
     }else {
      writerTopage(resp,ResultAjax.error("添加成功"));
     }
   }
 
 
   /**
   * 处理删除用户请求
   * @param req
   * @param resp
   * @throws ServletException
   * @throws IOException
   */
  private void deleteUser(HttpServletRequest req,
              HttpServletResponse resp) throws ServletException, IOException {
    Integer id = Integer.valueOf(req.getParameter("id"));
    if (id == null) {
      writerTopage(resp, ResultAjax.error("id不能为空"));
     } else {
      UsersService usersService = new UsersServiceImpl();
      int i = usersService.deleteById(id);
      if (i > 0){
        writerTopage(resp, ResultAjax.success("删除成功"));
       }else {
        writerTopage(resp, ResultAjax.success("删除失败"));
       }
     }
   }
 
}

Ajax实战案例_前端页面删除用户数据

创建删除用户事件

 // 删除用户
  function deleteUser(userid){
    $.post("user.do",{id:userid,flag:"delete"},function(result){
      if (result.code == 200){
        alert(result.message)
        location.reload()
       }
     })
   }

绑定删除事件

  function listUser(obj){
    var str ="";
    $.each(obj.data,function(){
      str+= "<tr align='center' bgcolor=\"#FFFFFF\">" +
        "<td id='"+this.id+"'>"+this.id +"</td>"+
        "<td>"+this.name+"</td>" +
        "<td>"+this.age+"</td>" +
        "<td><a href='#' οnclick='preUpdateUser("+this.id+")'>更新</a>&nbsp;&nbsp;<a href='#' οnclick='deleteUser("+this.id+")'>删除 </a></td></tr>"
     });
    $("#tBody").prepend(str);
   }

图图图图爱睡觉

关注

17
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Ajax技术详解

JSON(JavaScript Object Notation) 是一种**基于字符串的轻量级的数据交换格式。**易于人阅读和编写，同时也易于机器解析和生成。JSON是JavaScript数据类型的子集。XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。比如说我有一个学生数据： name = “zhangsan”;age = 22;
复制链接

扫一扫