32、 Ajax

最新推荐文章于 2022-02-16 11:18:18 发布
最新推荐文章于 2022-02-16 11:18:18 发布
阅读量110 收藏
点赞数
分类专栏： 网络协议http 文章标签： ajax jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45689826/article/details/120441650
版权

 

 

 

 

<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/24
  Time: 8:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script>
      function but(){
        var xhr = new XMLHttpRequest(); //先实例化
        xhr.open("get","ajax.do");  //get以什么样的方式，跳转到一个servlet里面叫ajax.do
        xhr.send();
        xhr.onreadystatechange = function(){
          if(xhr.readyState == 4 && xhr.status == 200){
            alert(xhr.responseText);
            document.getElementById("span").innerHTML = xhr.responseText;
          }
        }
      }
    </script>
  </head>
  <body>
  <h3>你好</h3>
  <hr/>
  <span id="span" >
    <input value="ok" type="button" onclick="but()"/>
  </span>
  </body>
</html>


package com.ajaxServlet01;

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;

@WebServlet("/ajax.do")
public class AjaxServlet01 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter pw = resp.getWriter();
        pw.println("hello ajax");
        pw.flush();
        pw.close();

    }
}

 

 

 

 

 

 

 Ajax_通过JSON格式在响应中传递单个对象

 

package com.ajaxServlet01.pojo;

public class Users {
    private int userid;
    private String username;

    public int getUserid() {
        return userid;
    }

    public void setUserid(int userid) {
        this.userid = userid;
    }

    public String getUsername() {
        return username;
    }

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

package com.ajaxServlet01.servlet;

import com.ajaxServlet01.pojo.Users;
import com.fasterxml.jackson.databind.ObjectMapper;

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;

/**
 * 通过Json格式响应单个对象
 */
@WebServlet("/single.do")
public class SingleObjectServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //创建Users对象
        Users users = new Users();
        users.setUserid(1);
        users.setUsername("hhh");
        //使用Jackson的API将Users对象转换为Json格式的字符串对象
        ObjectMapper objectMapper = new ObjectMapper();
        //将Users对象转换为JSON格式的字符串对象
        String string = objectMapper.writeValueAsString(users);
        System.out.println(string);
        //设置响应类型为application/json
        resp.setContentType("application/json");

        PrintWriter pw = resp.getWriter();
        pw.print(string);
        pw.flush();
        pw.close();
    }
}


<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/24
  Time: 10:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script>
        function but(){
            var xhr = new XMLHttpRequest(); //先实例化
            xhr.open("get","single.do");  //get以什么样的方式，跳转到一个servlet里面叫ajax.do
            xhr.send();
            xhr.onreadystatechange = function(){  //回调方法
                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                    //通过javascript的内置对象JSON中的parse函数将JSON格式的字符串对转换成javascript对象
                    var obj = JSON.parse(xhr.responseText);
                    alert(obj.userid+" "+obj.username);
                    document.getElementById("span").innerHTML = obj.userid+"<br/>"+obj.username;
                }
            }
        }
    </script>
</head>
<body>
<h3>JSON对单个对象的响应</h3>
<hr/>
<span id="span" >
    <input value="ok" type="button" onclick="but()"/>
  </span>
</body>
</html>

Ajax_通过JSON格式在响应中传递多个对象 

package com.ajaxServlet01.servlet;

import com.ajaxServlet01.pojo.Users;
import com.fasterxml.jackson.databind.ObjectMapper;
//Ajax_通过JSON格式在响应中传递多个对象
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.ArrayList;
import java.util.LinkedList;
import java.util.List;

@WebServlet("/multiple.do")
public class MultipleServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Users users1 = new Users();
        users1.setUserid(1);
        users1.setUsername("bob");

        Users users2 = new Users();
        users2.setUsername("lucky");
        users2.setUserid(2);

        //将多个对象的值放到集合中
        List<Users> list = new ArrayList<>();
        list.add(users1);
        list.add(users2);

        //通过jackson将list转换为JSON格式的字符串对象
        ObjectMapper objectMapper = new ObjectMapper();
        String string = objectMapper.writeValueAsString(list);
        System.out.println(string);
        resp.setContentType("application/json");

        PrintWriter pw = resp.getWriter();
        pw.print(string);
        pw.flush();
        pw.close();

    }
}

<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/24
  Time: 15:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script>
        function but(){
            var xhr = new XMLHttpRequest(); //先实例化
            xhr.open("get","multiple.do");  //get以什么样的方式，跳转到一个servlet里面叫ajax.do
            xhr.send();
            xhr.onreadystatechange = function(){  //回调方法
                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                    //通过javascript的内置对象JSON中的parse函数将JSON格式的字符串对转换成javascript对象
                    var obj = JSON.parse(xhr.responseText);
                    var temp = "";
                    for(i=0;i<obj.length;i++){ //因为是多个属性值所以循环遍历
                        alert(obj[i].userid+" "+obj[i].username);
                        temp += obj[i].userid+" "+obj[i].username+"<br/>";
                    }

                    document.getElementById("span").innerHTML = temp;
                }
            }
        }
    </script>
</head>
<body>
<h3>JSON对多个对象的响应</h3>
<hr/>
<span id="span" >
    <input value="ok" type="button" onclick="but()"/>
  </span>
</body>
</html>

Ajax_在JSON中通过Map传递数据

package com.ajaxServlet01.servlet;
//使用Map模型传递数据
import com.fasterxml.jackson.databind.ObjectMapper;

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.HashMap;
import java.util.Map;

@WebServlet("/map.do")
public class MapModelServlet04 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Map<String,Object> map = new HashMap<>();
        map.put("username","hhh");
        map.put("url","map.do");

        ObjectMapper objectMapper = new ObjectMapper();
        String string = objectMapper.writeValueAsString(map);
        System.out.println(string);
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(string);
        pw.flush();
        pw.close();
    }
}

<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/24
  Time: 16:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script>
        function but(){
            var xhr = new XMLHttpRequest(); //先实例化
            xhr.open("get","map.do");  //get以什么样的方式，跳转到一个servlet里面叫ajax.do
            xhr.send();
            xhr.onreadystatechange = function(){  //回调方法
                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                    //通过javascript的内置对象JSON中的parse函数将JSON格式的字符串对转换成javascript对象
                    var obj = JSON.parse(xhr.responseText);
                    alert(obj.username+" "+obj.url);
                    document.getElementById("span").innerHTML = obj.username+"<br/>"+obj.url;
                }
            }
        }
    </script>
</head>
<body>
<h3>Ajax_在JSON中通过Map传递数据</h3>
<hr/>
<span id="span" >
    <input value="ok" type="button" onclick="but()"/>
  </span>
</body>
</html>

Ajax_在请求中通过JSON格式传递数据

 

package com.ajaxServlet01.servlet;
//在请求中通过JSON格式传递数据
import com.ajaxServlet01.pojo.Users;
import com.fasterxml.jackson.databind.ObjectMapper;

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;

@WebServlet("/json.do")
public class requestJsonServlet05 extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //从请求体中获取提交的JSON格式的数据
        req.setCharacterEncoding("utf-8");
        String s = req.getReader().readLine();
        //使用Jackjson将JSON格式的字符串转换成Java对象
        ObjectMapper objectMapper = new ObjectMapper();
        Users users = objectMapper.readValue(s,Users.class);
        System.out.println(users.getUserid()+" "+users.getUsername());
        resp.setContentType("application/json");
        PrintWriter pw  = resp.getWriter();
        pw.print("ok");
        pw.flush();
        pw.close();
    }
}


<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/24
  Time: 16:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script>
        function but(){
            var id = document.getElementById("userid").value;
            var name = document.getElementById("username").value;
            var obj = {userid:id,username:name}
            var content = JSON.stringify(obj); //将js对象转换成json对象
            alert(content);
            var xhr = new XMLHttpRequest(); //先实例化
            xhr.open("post","json.do");  //post以什么样的方式，跳转到一个servlet里面叫json.do
            xhr.send(content);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                    document.getElementById("span").innerHTML = xhr.responseText;
                }
            }
        }
    </script>
</head>
<body>
<h3>Ajax_在请求中通过JSON格式传递数据</h3>
<hr/>
用户id：<input name="userid" id="userid"/><br/>
用户姓名:<input name="username" id="username"/><br/>
<span id="span" >
    <input value="ok" type="button" onclick="but()"/>
  </span>
</body>
</html>

Ajax_Jackson的常用注解

Ajax_Jquery的$.ajax方法的使用

​​​​​​​

 

 

<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/25
  Time: 9:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script> //jquery中引入ajax
    <script>
      function but() {
          $.ajax({
              type:"get",
              url:"jqueryAjax.do",
              success:function(result){
                  $("#span").html(result);
              }
          })
      }
    </script>
</head>
<body>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>

package com.ajaxServlet01.servlet;

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;
@WebServlet("/jqueryAjax.do")
public class JqueryAjax07 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter pw = resp.getWriter();
        pw.print("hello jquery ajax");
        pw.flush();
        pw.close();
    }
}

Ajax_$.ajax()中提交数据

 

<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/25
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script> //jquery中引入ajax
    <script>
        function but() {
            var userid = $("#userid").val();
            var username = $("#username").val();

            $.ajax({
                type:"get",
                url:"data.do",

                // data: "id="+userid+"&name="+username,
                //基于javascript格式提交数据
                data:{
                  id:userid,
                  name:username
                },
                success:function(result){
                    $("#span").html(result);
                }
            })
        }
    </script>
</head>
<body>
用户ID：<input type="text" id="userid"/> <br/>
用户姓名：<input type="text" id="username"/> <br/>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>

package com.ajaxServlet01.servlet;
//Ajax_$.ajax()中提交数据
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/data.do")
public class dataServlet08 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userid = req.getParameter("id");
        String username = req.getParameter("name");

        PrintWriter pw = resp.getWriter();
        pw.print(userid+""+username);
        pw.flush();
        pw.close();
    }
}

Ajax_$.ajax()中提交JSON格式的数据

 

 

<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/25
  Time: 11:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script> //jquery中引入ajax
    <script>
        function but() {
            var userid = $("#userid").val();
            var username = $("#username").val();

            $.ajax({
                type:"post",
                url:"jsonData.do",

               //Ajax_$.ajax()中提交JSON格式的数据
                data:JSON.stringify({
                    id:userid,
                    name:username
                }),
                success:function(result){
                    $("#span").html(result);
                }
            })
        }
    </script>
</head>
<body>
用户ID：<input type="text" id="userid"/> <br/>
用户姓名：<input type="text" id="username"/> <br/>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>

package com.ajaxServlet01.servlet;
//Ajax_$.ajax()中提交JSON格式的数据
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;


@WebServlet("/jsonData.do")
public class JsonDataServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String s = req.getReader().readLine();
        PrintWriter pw = resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
}

Ajax_$.ajax()处理响应中的JSON格式数据

 

<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/25
  Time: 11:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script> //jquery中引入ajax
    <script>
        function but() {
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.ajax({
                type:"post",
                url:"jsonConvert.do",
                dataType:"json",
                //Ajax_$.ajax()中提交JSON格式的数据
                data:JSON.stringify({
                    id:userid,
                    name:username
                }),
                success:function(result){
                    alert(result.id+" "+result.name);
                    $("#span").html(result.id+" "+result.name);
                }
            })
        }
    </script>
</head>
<body>
用户ID：<input type="text" id="userid"/> <br/>
用户姓名：<input type="text" id="username"/> <br/>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>

package com.ajaxServlet01.servlet;
//提交JSON格式数据在页面中自动转换类型
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;

@WebServlet("/jsonConvert.do")
public class jsonConvertServlet09 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json");
        String s = req.getReader().readLine();
        PrintWriter pw = resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
}

Ajax_$.get()的使用

 

<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/25
  Time: 15:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script> //jquery中引入ajax
    <script>
        function but() {
            var userid = $("#userid").val();
            var username = $("#username").val();

            //使用get
            // $.get("data.do","id="+userid+"&name="+username,function(result){
            //     $("#span").html(result);
            // })
            $.get("data.do",{id:userid,name:username},function(result){
                $("#span").html(result);
            })
        }
    </script>
</head>
<body>
用户ID：<input type="text" id="userid"/> <br/>
用户姓名：<input type="text" id="username"/> <br/>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>

Ajax_$.post()的使用

 

<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/25
  Time: 15:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script> //jquery中引入ajax
    <script>
        function but() {
            var userid = $("#userid").val();
            var username = $("#username").val();

            //使用get
            // $.post("data.do","id="+userid+"&name="+username,function(result){
            //     $("#span").html(result);
            // })
            $.post("data.do",{id:userid,name:username},function(result){
                $("#span").html(result);
            })
        }
    </script>
</head>
<body>
用户ID：<input type="text" id="userid"/> <br/>
用户姓名：<input type="text" id="username"/> <br/>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>

Ajax_$.getJSON()的使用

 

 

<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/25
  Time: 15:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script> //jquery中引入ajax
    <script>
        function but() {
            var userid = $("#userid").val();
            var username = $("#username").val();


            $.getJSON("getJson.do",{id:userid,name:username},function(result){
                alert(result.userid+" "+result.username);
                $("#span").html(result.userid+" "+result.username);
            })
        }
    </script>
</head>
<body>
用户ID：<input type="text" id="userid"/> <br/>
用户姓名：<input type="text" id="username"/> <br/>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>

package com.ajaxServlet01.servlet;
/**
 * getJson方法传递数据并返回JSON格式数据
 */

import com.ajaxServlet01.common.JsonUtils;

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.HashMap;
import java.util.Map;
@WebServlet("/getJson.do")
public class GetJsonServlet10 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userid = req.getParameter("id");
        String username = req.getParameter("name");
        Map<String,String> map = new HashMap<>();
        map.put("userid",userid);
        map.put("username",username);
        String s = JsonUtils.objectToJson(map);
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
}

Ajax_serialize()方法的使用

 

<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/25
  Time: 16:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script> //jquery中引入ajax
    <script>
        function but() {
           var param = $("#form").serialize();   //这里就是免去 拼接字符串 userid+" " +username
            alert(param);
            $.ajax({
                type:"get",
                url:"data.do",

                 data:param,    

                success:function(result){
                    $("#span").html(result);
                }
            })
        }
    </script>
</head>
<body>
<form id="form">
    用户ID：<input type="text" name="id" id="userid"/> <br/>
    用户姓名：<input type="text" name="name" id="username"/> <br/>
</form>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>

demo

JSP页面

<%--
  Created by IntelliJ IDEA.
  User: 21129
  Date: 2021/9/25
  Time: 16:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            //获取页面初始化数据
            getData();
            //添加按钮绑定点击事件
            $("#add").click(function () {
                addOrUpdateUser("addUser");
            });
            //更新按钮绑定点击事件
            $("#update").click(function(){
                addOrUpdateUser("updateUser");
            });
        });
        //获取页面初始化数据
        function getData(){
            $.getJSON("user.do",{flag:"getData"},function(result){
                init(result);
            });
        }
        //遍历数据生成数据
        function init(obj) {
            var str="";
            $.each(obj,function(){
              str += "<tr align='center'><td id='"+this.userid+"'>"+this.userid+"</td><td>"+this.username+"</td><td>"+this.usersex+"</td><td>"+this.userbirth+"</td><td><a href='#' onclick='preUpdateUser("+this.userid+")'>选择更新</a>&nbsp;&nbsp;&nbsp;<a href='#' onclick='deleteUser("+this.userid+")'>删除</a></td></tr>"
            });
            $("#tBody").prepend(str);
        }
        //用户添加或者用户更新
        function addOrUpdateUser(flag){
            //从页面中获取数据
            var userid = $("#userid").val();
            var username = $("#username").val();
            var usersex = $("#usersex").val();
            var userbirth = $("#userbirth").val();

            var data = {
                userid :userid,
                username:username,
                usersex: usersex,
                userbirth: userbirth,
                flag: flag
            }
            location.reload();  //页面刷新
            $.get("user.do",data,function(result){
                alert(result);
            })
        }
        //更新之前的数据选择
        function preUpdateUser(userid){
            var arr = new Array();
            $("#"+userid).closest("tr").children().each(function(index,ele){
                if(index<=3){
                    arr[index] = ele.innerText
                }
            });
            //回填选择的一行信息
            $("#userid").val(arr[0]);
            $("#username").val(arr[1]);
            $("#usersex").val(arr[2]);
            $("#userbirth").val(arr[3]);
            $("#userid").attr("readonly",true); //不能修改id属性
        }
        //删除用户
        function deleteUser(userid) {
                $("#"+userid).closest("tr").remove();
                $.get("user.do",{userid:userid},function(result){
                    alert(result);
                })
        }
    </script>
</head>
<body>
<table align="center" width="60%" border="1">
    <tr>
        <td>ID：</td>
        <td><input type="text" name="userid" id="userid"/></td>
        <td>姓名：</td>
        <td><input type="text" name="username" id="username"/></td>
    </tr>
    <tr>
        <td>性别：</td>
        <td><input type="text" name="usersex" id="usersex"/></td>
        <td>生日：</td>
        <td><input type="text" name="userbirth" id="userbirth"/></td>
    </tr>
    <tr align="center">
        <td colspan="4">
            <input type="button"  value="添加用户" id="add" />
            <input type="button"  value="更新用户" id="update"/>
        </td>
    </tr>
</table>
<hr/>
<table align="center" width="60%" bgcolor="" border="1" id="myTable">
    <thead>
    <tr align="center">
        <td>ID</td>
        <td>姓名</td>
        <td>性别</td>
        <td>生日</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody id="tBody"></tbody>
</table>
</body>
</html>

实体类：

package com.ajaxServlet01.pojo;

import com.fasterxml.jackson.annotation.JsonFormat;
import java.util.Date;

public class User {
    private int userid;
    private String username;
    private String usersex;
    @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
    private Date userbirth;

    public int getUserid() {
        return userid;
    }

    public void setUserid(int userid) {
        this.userid = userid;
    }

    public String getUsername() {
        return username;
    }

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

    public String getUsersex() {
        return usersex;
    }

    public void setUsersex(String usersex) {
        this.usersex = usersex;
    }

    public Date getUserbirth() {
        return userbirth;
    }

    public void setUserbirth(Date userbirth) {
        this.userbirth = userbirth;
    }
}

Servlet实现页面

package com.ajaxServlet01.servlet;
/**
 * 用户管理Servlet
 */

import com.ajaxServlet01.common.JsonUtils;
import com.ajaxServlet01.pojo.User;

import javax.servlet.ServletContext;
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.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.SimpleTimeZone;

@WebServlet("/user.do")
public class UserServlet 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");
        if("getData".equals(flag)){
            this.getData(req,resp);
        }else if("addUser".equals(flag)){
            this.addUser(req,resp);
        }else if("updateUser".equals(flag)){
            this.updateUser(req,resp);
        }else{
            this.deleteUser(req,resp);
        }
    }
    //处理删除请求
    private void deleteUser(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
        ServletContext servletContext = this.getServletContext();
        List<User> list =(List<User>) servletContext.getAttribute("list");
        String userid = req.getParameter("userid");
        User user = null;
        for(User temp:list){
            if((temp.getUserid()+"").equals(userid)){
                user = temp;
                break;
            }
        }
        if(user !=null){
            list.remove(user);
        }
        resp.setContentType("text/plain;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.print("更新成功");
        pw.flush();
        pw.close();
    }


//处理更新请求
    private void updateUser(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
        User user = this.createUser(req);
        ServletContext servletContext = this.getServletContext();
        List<User> list =(List<User>) servletContext.getAttribute("list");
        User u =null;
        for(User temp : list) {
            if (temp.getUserid() == user.getUserid()) {
                u = temp;
                break;
            }
        }
            if(u != null){
                list.remove(u);
            }
            list.add(user);
            resp.setContentType("text/plain;charset=utf-8");
            PrintWriter pw = resp.getWriter();
            pw.print("更新成功");
            pw.flush();
            pw.close();

    }

    //处理添加用户请求
    private void addUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
            User user = this.createUser(req);
            ServletContext servletContext = this.getServletContext();
            List<User> list =(List<User>) servletContext.getAttribute("list");
            list.add(user);
            resp.setContentType("text/plain;charset=utf-8");
            PrintWriter pw = resp.getWriter();
            pw.print("添加成功");
            pw.flush();
            pw.close();
    }
    //获取请求数据、
    private User createUser(HttpServletRequest req){
        String userid = req.getParameter("userid");
        String username = req.getParameter("username");
        String usersex = req.getParameter("usersex");
        String userbirth = req.getParameter("userbirth");

        User user = new User();
        user.setUserid(Integer.parseInt(userid));
        user.setUsername(username);
        user.setUsersex(usersex);
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        try {
            Date parse = sdf.parse(userbirth);
            user.setUserbirth(parse);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        return user;
    }


    //获取页面初始化数据
    private void getData(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
          List<User> list = (List<User>)this.getServletContext().getAttribute("list");
          String s = JsonUtils.objectToJson(list);
          resp.setContentType("application/json");
          PrintWriter pw = resp.getWriter();
          pw.print(s);
          pw.flush();
          pw.close();
    }

    //生成模拟数据初始化
    @Override
    public void init() throws ServletException {
       User user = new User();
       user.setUserid(1);
       user.setUsername("hhh");
       user.setUsersex("male");
       user.setUserbirth(new Date());

        User user2 = new User();
        user2.setUserid(12);
        user2.setUsername("1111hhh");
        user2.setUsersex("male");
        user2.setUserbirth(new Date());

        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user2);
        ServletContext servletContext = this.getServletContext();
        servletContext.setAttribute("list",list);
    }
}

实现效果：

​​​​​​​

 

快乐的小毛毛虫
关注
专栏目录
spring方式进行文件上传（简单小案例）
GCUDE的博客
02-17 409
文件上传之spring方式 一、搭建环境 1.导入坐标 所需jar包有： 1. spring-context 2. spring-web 3. spring-webmvc 4. javax.servlet-api 5. jsp-api 6. commons-io 7. commons-fileupload 具体代码如下： <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/
Java 32---Ajax技术
hala22的博客
03-01 173
导读 1.Ajax简介 2.常用方法 3.常用属性 4.使用步骤 5.实例 Ajax简介 Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法 Ajax：只刷新局部页面的技术 JavaSc...
JavaWeb学习笔记（二）
Mr_zhangyj的博客
12-28 1659
1、Jsp 1.1、什么是 jsp，它有什么用? jsp 的全换是 java server pages。Java 的服务器页面。 jsp 的主要作用是代替 Servlet 程序回传 html 页面的数据。 因为 Servlet 程序回传 html 页面数据是一件非常繁锁的事情。开发成本和维护成本都极高。 Servlet 回传 html 页面数据的代码： package Servlet; import com.sun.net.httpserver.HttpsServer; import jaka.
Idea 设置注释作者名字
热门推荐
gloryzyf
07-19 3万+
问题提出：在用IDEA编程创建一个新的文件时自动产生的user名字怎么自定义？   文件注释：   Html代码   %--     Created by IntelliJ IDEA.     User: user     Date: 2014/11/14     Time: 13:37     To change this template u
SpringMvc学习笔记！
qq_45441466的博客
03-29 120
SpringMVC SSM: mybatis +Spring + SpringMVC MVC三层架构 回顾MVC： 什么是MVC MVC是模型(Model)、视图(View)、控制器(Controller)的简写，是一种软件设计规范。 是将业务逻辑、数据、显示分离的方法来组织代码。 MVC主要作用是降低了视图与业务逻辑间的双向耦合。 MVC不是一种设计模式，MVC是一种架构模式。当然不同的MVC存在差异。 Model(模型)：数据模型，提供要展示的数据，因此包含数据和行为...
STM32+ENC28J60+LWIP通过AJAX来实现的智能家居
12-01
这个用的是STM32+ENC28J60+LWIP协议栈实现的智能家居，通过网页来控制板子上的LED灯，同时实时刷新STM32时间和温度。网页是用记事本用HTML编写的，直接用记事本打开就能看网页代码，网页代码和图片都通过转码后存在...
基于AJAX方式实现的STM32H7_WebServer网页文件
09-22
本资源是STM32H7开发板程序所用到的网页文件，配合《基于AJAX方式实现的STM32H7_WebServer源码》使用，对原子哥的网页文件进行了部分修改，以实现AJAX动态更新数据，该资源解压后将文件夹中的内容拷贝到U盘的根目录...
基于STM32与AJAX的远程监控系统服务器设计.pdf
06-28
以上知识点构成了基于STM32与AJAX的远程监控系统服务器设计的核心内容，通过这些知识点，可以更好地理解STM32微控制器在远程监控领域的应用，以及如何通过嵌入式Web服务器和现代网页技术，实现一个高效、实时和用户...
基于AJAX的CRUD示例(JTable)源码
04-09
基于AJAX的CRUD示例(JTable)源码 源码描述： 当我们正在开发一个“数据操作页面”,我们几乎总是做同样的事情:“表/网格”,用于“显示记录的数据库表,一个“创建新记录”页面/对话框来添加一个新的记录到数据库,一个...
基于AJAX方式实现的STM32H7_WebServer源码
09-22
本程序根据原子哥STM32H7开发板源码《网络实验15 NETCONN_WEBserver实验(UCOSII版本)》改编，且包含了修改后的网页文件，原子哥的程序是将网页文件转换成了程序的一部分，该方式不方便网页的制作与调试，而且测试...
Java设计模式之模板方法
xiaoshang的专栏
06-17 714
模板方法 package com.hycz.design.pattern.template; /** * Created with IntelliJ IDEA. * User: shangke * Date: 6/17/13 * Time: 11:33 AM * To change this template use File | Settings | File Templates.
idea的使用5——创建项目2
武汉小喽啰
01-18 334
1. 创建WEB工程 社区版没有创建web项目的功能，只能创建maven的web工程，这里开始就使用破解的企业版。 1.1 创建步骤 File——New——Project 在弹窗中选中Java Enterprise——project SDK——Java EE version——Application Server Project SDK：jdk版本 Java EE Version：...
【Java】Java写一个JSP页面，Springboot实现Mysql数据库的增删改查
浪里小飞侠的博客
02-16 3216
Java写一个JSP页面，Springboot实现Mysql数据库的增删改查一、目标二、环境配置1、在web目录下的Web-INF下创建一个lib目录，并把mysql-connector-java-8.0.21.jar包复制进去2、将jar包加入到项目中三、hello world效果确保在计算机上安装好MySQL数据库四、连接测试是否连接成功数据库五、开始正式进入JSP页面实现数据库的增删改查1、需要创建一个Student.java，并生成该类的set，get方法，该类放在src/domain目录下2、实现
文件的上传和下载
终不似少年游的博客
08-30 144
文件的上传和下载 这个星期学习了蛮多东西,我准备吧简单写一个文件的上传和下载. <%-- Created by IntelliJ IDEA. User: liqiuyang Date: 2020/8/26 Time: 9:03 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=GB2312" languag
文件上传之传统方式上传代码回顾
weixin_40055163的博客
10-23 159
文件上传之传统方式上传代码回顾 1.在index.jsp编写如下代码： <%-- Created by IntelliJ IDEA. User: Adair Date: 2020/7/2 0002 Time: 16:07 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="ja
JAVAWEB作业案例
b1720413663的博客
03-21 623
第一步： 编写登录页面 <%-- Created by IntelliJ IDEA. Date: 2021/3/19 Time: 10:55 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> .
SSM框架之Spring MVC(三）http响应、文件上传
小蜜蜂1010的博客
10-16 427
一、响应数据和结果视图 1.1 返回值分类1.1.1 字符串 创建实体类和controller类 实体类User package cn.xiaomifeng1010.domain; import java.io.Serializable; public class User implements Serializable{ /** * */ private st...
Struts2.x 学习笔记 之 通过超链接动态加载国际化资源文件
fanfan4569的博客
10-11 704
实现超链接转换原理：i18n.jsp<%@ taglib prefix="s" uri="/struts-tags" %> <%-- Created by IntelliJ IDEA. User: Donald Date: 2016/10/11 Time: 14:47 To change this template use File | Settings | File Templ
Intellij IDEA设置头文件@AUTHOR注释
好好学习天天向上
12-03 910
一：基础操作 https://blog.csdn.net/engerla/article/details/84846463 二：增加类描述 https://blog.csdn.net/engerla/article/details/90242624
stm32实现ajax
最新发布
01-01
要在STM32上实现Ajax功能，需要根据Ajax的工作原理和STM32的特点进行相应的设计和开发。 首先，Ajax是一种通过在后台进行异步通信的技术，可以在不刷新整个页面的情况下，实现页面与服务器之间的数据交互。在STM32...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值