ajax总结

最新推荐文章于 2024-07-22 08:55:10 发布

没办法，我就是这么菜

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量295

点赞数

文章标签： ajax servlet javascript

本文链接：https://blog.csdn.net/qq_47070121/article/details/130940331

版权

Ajax

介绍

Ajax（Asynchronous javaScript XML）是一种异步处理数据的技术，用于创建快速动态网页，通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，网页的某部分进行更新。

使用场景

注册时，写完用户名，提示该用户名是否存在，可否注册
更新时，在输入完用户id后，下方的个人信息内容直接自动补全

jquery—ajax语法

get请求方式：

$.get(url,data,function(data){
    
})
发送get请求
参数1: url 是后台服务器地址
参数2: data 是发送到后台服务器的数据,是map格式,
        形如 { name: "John", time: "2pm" }
参数3: function 函数,是回调函数,是请求完成后执行的函数,参数data就是后台返回的数据

post请求：

$.post(url,data,function(data){
    
})
发送post请求
参数1: url 是后台服务器地址
参数2: data 是发送到后台服务器的数据,是map格式,
        形如 { name: "John", time: "2pm" }
参数3: function 函数,是回调函数,是请求完成后执行的函数,参数data就是后台返回的数据

Ajax：

$.ajax()是综合应用,
    	1) 可以随意指定请求方式
        2) 可以指定发送到后台的数据类型
        	一般表单发送的数据,称作表单数据,形如name=admin&pwd=123456
                                 servlet后台使用req.getParameter()接收
            可以指定为json数据,形如{"name":"admin","pwd":"123456"}
                        servlet后台使用字符流读取数据,拼接成json串                   3) 可以指定接收数据的格式
-------------------------------------                        $.ajax()是综合应用,
    	1) 可以随意指定请求方式
        2) 可以指定发送到后台的数据类型
        	一般表单发送的数据,称作表单数据,形如name=admin&pwd=123456
                                 servlet后台使用req.getParameter()接收
            可以指定为json数据,形如{"name":"admin","pwd":"123456"}
                        servlet后台使用字符流读取数据,拼接成json串                   3) 可以指定接收数据的格式
--------------------------------------------------------------------
$.ajax({
    url:"",  // 请求路径
    type:"get|post", // 指定请求方式,不写默认是get
    contenType:"application/x-www-form-urlencoded", // 默认的,发送表单数据
                              // "application/json" , 按json格式发送
    data:"name=admin&pwd=123456", // 发送到后台的数据
           // 如果是指定是json格式,此处应该{"name":"admin","pwd":"123456"}
    success:function(data){  // 请求成功的回调,data就是后台返回的数据
        
    },
    error:function(){  // 请求异常的回调函数
        alter("服务器正忙,稍后再试");
    }
})

示例：

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jquery-2.1.0.js"></script>
</head>
<body>
<button onclick="showAjaxGet()">$.get</button> <br>
<button onclick="showAjaxPost()">$.post</button> <br>
<button onclick="showAjax()">$.ajax</button> <br>
<script>
    function showAjaxGet() {
       // $.get(url,data,callback)
        $.get("/show/get",{"username":"tom"},function (ret) {
            console.log(ret)
            console.log(ret.code)
            console.log(ret.msg)
        })
    }

    function showAjaxPost() {
        $.post("/show/post",{"password":"123456"},function (ret) {
            console.log(ret)
            console.log(ret.code)
            console.log(ret.msg)
        })
    }

    /**
     * ajax发送get请求时,数据可以是字符串类型,也可以是object(即json类型)
     *  后台servlet都可以使用getParameter来接收
     * ajax发送post请求,且数据类型是json时,且指定数据类型是 contentType:"application/json",,
     *     此时后台无法使用getParameter来接收
     * ajax发送post请求,且数据类型是字符串时,后台可以用getParameter来接收
     */
    function showAjax() {
        $.ajax({
            url:"/show/ajax",
            type:"post",
            contentType:"application/json",
            //data: "username=cat&password=123456",
            data:{"username":"tomcat","password":"666666"},
            success:function (ret){
                console.log(ret)
            },
            error:function (){
                alert("服务器正忙")
            }
        })
    }

</script>
</body>
</html>

后端：

get：

@WebServlet("/show/get")
public class ShowAjaxGetServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        System.out.println("username = " + username);

        // 响应,响应给ajax回调也是json数据
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter out = resp.getWriter( );
        out.write("{\"code\":200,\"msg\":\"请求成功\"}");
    }
}

post：

@WebServlet("/show/post")
public class ShowAjaxPostServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String password = req.getParameter("password");
        System.out.println("password = " + password);


        // 响应,响应给ajax回调也是json数据
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter out = resp.getWriter( );
        out.write("{\"code\":200,\"msg\":\"请求成功\"}");
    }
}

ajax：

@WebServlet("/show/ajax")
public class ShowAjaxServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("ShowAjaxServlet-doGet" );
        String username = req.getParameter("username");
        System.out.println("username = " + username);

        String password = req.getParameter("password");
        System.out.println("password = " + password );

        // 响应,响应给ajax回调也是json数据
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter out = resp.getWriter( );
        out.write("{\"code\":200,\"msg\":\"请求成功-ajax\"}");
    }


    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("ShowAjaxServlet-doPost" );

        String username = req.getParameter("username");
        System.out.println("username = " + username);

        String password = req.getParameter("password");
        System.out.println("password = " + password );
        System.out.println(1/0 );
        // 响应,响应给ajax回调也是json数据
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter out = resp.getWriter( );
        out.write("{\"code\":200,\"msg\":\"请求成功-ajax\"}");
    }
}

案例一：

输入框绑定失去焦点事件
发送ajax请求,携带输入的用户名,到后台
后台servlet接收请求
servlet传递数据到service,
serice传递数据到dao层
dao层根据参数查询数据
将结果返回给service
service返回给servlet
servlet将接收到service返回数据响应给ajax的回调函数
ajax回调接收到返回的数据,判断
是否可以注册,做出样式改变

数据准备：

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL,
  `birthday` date DEFAULT NULL,
  `phone` varchar(255) DEFAULT NULL,
  `address` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>

用户名<input id="input-1" type="text" name="username"> <span id="span-1"></span>

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

    $("#input-1").blur(function (){
        var name = $("#input-1").val();

        // $.get 发送到后台的数据,其实表单数据
       $.get("/day42/check/user",{username:name},function (data){
            // console.log(data);
           // 后台返回的是json数据
           if (data.code == 200) {
               $("#span-1").text(data.msg)
               $("#span-1").css("color","green")
           } else {
               $("#span-1").text(data.msg)
               $("#span-1").css("color","red")
           }
       })
    })


</script>
</body>
</html>

后端：

@WebServlet("/check/user")
public class CheckUserServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 接收数据
        String username = req.getParameter("username");
        System.out.println("CheckUserServlet.doGet() username = " + username );

        // 传递数据给service
        UserServiceImpl userService = new UserServiceImpl( );
        User user = userService.findUserByUsename(username);

        System.out.println("CheckUserServlet.doGet() user = " + user );

        // 设置响应的内容类型为json格式,如果不设置的话返回给前端的是JSON字符串
        // 前端需要使用JSON.parse解析为json对象才能使用
        resp.setContentType("application/json;charset=utf-8");
        // 响应json数据,拼接json
        PrintWriter out = resp.getWriter( );
        // 判断
        if (user != null) { // 已存在,不能再注册
            // 响应json数据
            out.write("{\"code\":500,\"msg\":\"已经存在,不能注册\"}");
        } else { // 不存在,可以注册
            out.write("{\"code\":200,\"msg\":\"可以注册\"}");
        }

    }

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

userService&UserServiceImpl

public interface UserService {

    User findUserByUsename(String username);

}

public class UserServiceImpl  implements UserService {
    @Override
    public User findUserByUsename(String username) {
        // 调用dao
        UserDaoImpl userDao = new UserDaoImpl( );
        User user = userDao.findUserByUsername(username);

        return user;
    }
}

UserDao&UserDaoImpl

public interface UserDao {

    User findUserByUsername(String username);

}

public class UserDaoImpl implements UserDao {

    @Override
    public User findUserByUsername(String username) {
        // 加载驱动,获得连接
        Connection conn = DBUtil.getConnection( );
        PreparedStatement ps = null;
        ResultSet rs = null;
        User user = null;
        // 编写sql
        String sql = "select * from user where username = ?";
        try {
            // 预处理
            ps = conn.prepareStatement(sql);

            // 占位符赋值
            ps.setString(1, username);

            // 执行,返回结果集
            rs = ps.executeQuery( );

            if (rs.next( )) {
                user = new User( );
                int id = rs.getInt("id");
                String uname = rs.getString("username");
                String pwd = rs.getString("password");
                String phone = rs.getString("phone");
                String address = rs.getString("address");
                Date birthday = rs.getDate("birthday");

                user.setId(id);
                user.setUsername(uname);
                user.setPassword(pwd);
                user.setAddress(address);
                user.setPhone(phone);
                user.setBirthday(birthday);
            }
        } catch (Exception e) {
            e.printStackTrace( );
        } finally {
            DBUtil.closeAll(rs, ps, conn);
        }

        return user;
    }
}

$.post实现

只需将方法该表为$.post

$.ajax实现

以表单的形式发送数据

前端：

// 发$.ajax请求,发送表单形式发送
$.ajax({
    url:"/day42/check/user",
    type:"get",
    data:"username="+name,  // 表单的形式的是数据
    success:function(data){
        if (data.code == 200) {
            $("#span-1").text(data.msg)
            $("#span-1").css("color", "green")
        } else {
            $("#span-1").text(data.msg)
            $("#span-1").css("color", "red")
        }
    },
    error:function (){
        alert("服务器正忙!")
    }

})

后端：

@WebServlet("/check/user")
public class CheckUserServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 接收数据
        String username = req.getParameter("username");
        System.out.println("CheckUserServlet.doGet() username = " + username );


        // 传递数据给service
        UserServiceImpl userService = new UserServiceImpl( );
        User user = userService.findUserByUsename(username);

        System.out.println("CheckUserServlet.doGet() user = " + user );

        // 设置响应的内容类型为json格式
        resp.setContentType("application/json;charset=utf-8");
        // 响应json数据,拼接json
        PrintWriter out = resp.getWriter( );
        // 判断
        if (user != null) { // 已存在,不能再注册
            // 响应json数据
            out.write("{\"code\":500,\"msg\":\"已经存在,不能注册\"}");
        } else { // 不存在,可以注册
            out.write("{\"code\":200,\"msg\":\"可以注册\"}");
        }

    }

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

前端：

        $.ajax({
            url:"/day42/check/user",
            type:"post",// 发送json数据,需要使用post,get形式发送,后台会当做表单数据接收!!
            data: {"username":name},  // json形式的是数据
            contentType:"application/json", // 需要指定发送的数据类型为json,默认是application/x-www-form-urlencoded
            success:function(data){
    // 如果不行的话,查看一下返回的data是否是json字符串?如果是要解析为json对象 

                console.log(" $.ajax.json")
                if (data.code == 200) {
                    $("#span-1").text(data.msg)
                    $("#span-1").css("color", "green")
                } else {
                    $("#span-1").text(data.msg)
                    $("#span-1").css("color", "red")
                }
            },
            error:function (){
                alert("服务器正忙!")
            }

        })

使用$.ajax以get请求发送json数据，后台servlet可以使用req.getParameter(“”)来接收数据

使用$.ajax以post请求发送json数据时，后台servelt不可以使用req.getParameter(“”)来接收数据，应该使用输入流来读取json字符串

后端：

@WebServlet("/check/user")
public class CheckUserServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 接收数据,当发送json数据且以get方法时,用这种方法
        // String username = req.getParameter("username");
        // System.out.println("CheckUserServlet.doGet() username = " + username );

        /**
         * 前端发送的json数据,且是post,就不能使用req.getParameter("username");接数据
         * 可以使用请求对象获得一个输入流,从输入流获得json字符串
         */
        // 获得输入流
        BufferedReader reader = req.getReader( );
        // 准备拼接字符串
        StringBuilder sb = new StringBuilder( );

        String line = null;
        while((line = reader.readLine()) != null) {
            sb.append(line);
        }

        System.out.println("json字符串: " + sb.toString() );
        // 获得拆分后的数组 ["username","admin"]
        String[] split = sb.toString( ).split("=");
        String username = "";
        if (split[0].equals("username")) {
            username = split[1];
        }

        // 传递数据给service
        UserServiceImpl userService = new UserServiceImpl( );
        User user = userService.findUserByUsename(username);

        System.out.println("CheckUserServlet.doGet() user = " + user );

        // 设置响应的内容类型为json格式
        resp.setContentType("application/json;charset=utf-8");
        // 响应json数据,拼接json
        PrintWriter out = resp.getWriter( );
        // 判断
        if (user != null) { // 已存在,不能再注册
            // 响应json数据
            out.write("{\"code\":500,\"msg\":\"已经存在,不能注册\"}");
        } else { // 不存在,可以注册
            out.write("{\"code\":200,\"msg\":\"可以注册\"}");
        }

    }

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

案例二：

需求

需求:

更新时,在输入完用户id后,下方的个人信息内容直接自动补全

技术: html,ajax,servlet,jdbc

具体思路:

创建页面,创建一个表单输入框
给表单绑定失去焦点事件
获得输入框的值,发送ajax请求,发送数据
后台servlet接收
传递到service
service传递到dao层
dao层查询数据
返回给service
service返回给servlet
servlet将数据响应给前端
此处需要将全部用户信息拼接成json字符串

ajax回调函数,获得数据
获得输入框对象,给赋值

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑</title>
</head>
<body>
<table border="2" align="center">
  <tr>
    <td>编号</td>
    <td>
      <input  id="input-1" type="text" name="id">
    </td>
  </tr>
  <tr>
    <td>用户名</td>
    <td>
      <input type="text" name="username">
    </td>
  </tr>
  <tr>
    <td>密码</td>
    <td>
      <input type="text" name="password">
    </td>
  </tr>
  <tr>
    <td>生日</td>
    <td>
      <input type="date" name="birthday">
    </td>
  </tr>
  <tr>
    <td>手机</td>
    <td>
      <input type="text" name="phone">
    </td>
  </tr>
  <tr>
    <td>地址</td>
    <td>
      <input type="text" name="address">
    </td>
  </tr>
</table>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">
  $("#input-1").blur(function (){
    var id =  $("#input-1").val();
    $.ajax({
      url:"/day42/find/user",
      type:"get",
      data:"id="+id,  // 发送表单数据
      success:function (data){
      // 如果不行的话,查看一下返回的data是否是json字符串?如果是要解析为json对象 
        $("input[name=username]").val("")
        $("input[name=password]").val("")
        $("input[name=birthday]").val("")
        $("input[name=phone]").val("")
        $("input[name=address]").val("")
        if (data.status == 200) {
          var user = data.data;
          $("input[name=username]").val(user.username)
          $("input[name=password]").val(user.password)
          $("input[name=birthday]").val(user.birthday)
          $("input[name=phone]").val(user.phone)
          $("input[name=address]").val(user.address)
        }else{
          alert(data.msg)
        }
      }
    })
  })
</script>
</body>
</html>

后端：

@WebServlet("/find/user")
public class UserFindServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         // 接收数据
        String id = req.getParameter("id");
        System.out.println("UserFindServlet.doGet id = " +id );

        // service
        UserFindService userFindService = new UserFindServiceImpl();
        User user = userFindService.findUserById(id);

        resp.setContentType("application/json;charset=utf-8");
        PrintWriter out = resp.getWriter( );
        if (user != null) {
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            String date = sdf.format(user.getBirthday( ));
            out.write("{\"status\":200,\"msg\":\"查询成功\",\"data\":{\"id\":"+user.getId()+",\"username\":\""+user.getUsername()+"\",\"password\":\""+user.getPassword()+"\",\"birthday\":\""+date+"\",\"phone\":\""+user.getPhone()+"\",\"address\":\""+user.getAddress()+"\"}}");
        } else {
            out.write("{\"status\":500,\"msg\":\"查无此人\"}");
        }
    }


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

UserFindService&UserFindServiceImpl

public interface UserFindService {
    User findUserById(String id);
}
public class UserFindServiceImpl implements UserFindService {
    @Override
    public User findUserById(String id) {

        // dao
        UserDaoImpl userDao = new UserDaoImpl( );
        User user = userDao.findUserById(id);
        return user;
    }
}

UserDao&UserDaoImpl

public interface UserDao {

    User findUserByUsername(String username);
    User findUserById(String id);
}

    public User findUserById(String id) {
        // 加载驱动,获得连接
        Connection conn = DBUtil.getConnection( );
        PreparedStatement ps = null;
        ResultSet rs = null;
        User user = null;
        // 编写sql
        String sql = "select * from user where id = ?";
        try {
            // 预处理
            ps = conn.prepareStatement(sql);

            // 占位符赋值
            ps.setInt(1, Integer.parseInt(id));

            // 执行,返回结果集
            rs = ps.executeQuery( );

            if (rs.next( )) {
                user = new User( );
                int uid = rs.getInt("id");
                String uname = rs.getString("username");
                String pwd = rs.getString("password");
                String phone = rs.getString("phone");
                String address = rs.getString("address");
                Date birthday = rs.getDate("birthday");

                user.setId(uid);
                user.setUsername(uname);
                user.setPassword(pwd);
                user.setAddress(address);
                user.setPhone(phone);
                user.setBirthday(birthday);
            }
        } catch (Exception e) {
            e.printStackTrace( );
        } finally {
            DBUtil.closeAll(rs, ps, conn);
        }

        return user;
    }

没办法，我就是这么菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax总结

Ajax（Asynchronous javaScript XML）是一种异步处理数据的技术，用于创建快速动态网页，通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，网页的某部分进行更新。
复制链接

扫一扫