AJAX基本&&JSON基础

快来打我* 2024-03-27 12:59 157阅读 0赞

目录

一、AJAX概述

二、AJAX快速入门

三、案例——使用AJAX验证用户名是否存在

四、Axios框架

五、JSON

5.1 JSON概述

5.2 JSON基础语法

5.3 JSON数据和Java对象转换

5.4 案例——查询所有（AJAX、JSON）

5.5 案例——新增品牌

一、AJAX概述

928dcc3a62e34ed1a04a5ba5088ac2ca.png

68fd9123001b4567b2d746bf0187eb8e.png

5035dfec83834f1c80ee77b501dd3424.png

885595fd87dc4e6ea57d3e32603070f0.png

二、AJAX快速入门

00ff14b32b3e4b1ebd4fc3e5742178ac.png

  1. <script>
  2.     //1. 创建核心对象
  3.     var xhttp;
  4.     if (window.XMLHttpRequest) {
  5.         xhttp = new XMLHttpRequest();
  6.     } else {
  7.         // code for IE6, IE5
  8.         xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  9.     }
  11.     //2. 发送请求
  12.     xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
  13.     xhttp.send();
  15.     //3. 获取响应
  16.     xhttp.onreadystatechange = function() {
  17.         if (this.readyState == 4 && this.status == 200) {
  18.                alert(this.responseText);
  19.         }
  20.     };
  22. </script>

三、案例——使用AJAX验证用户名是否存在

1c861f69f6b14dc7aee23e15dcd396b9.png

SelectUserSevlet伪代码：

  1. @WebServlet("/selectUserServlet")
  2. public class SelectUserServlet extends HttpServlet {
  3.     @Override
  4.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  6.         //1. 接收用户名
  7.         String username = request.getParameter("username");
  9.         //2. 调用service查询User对象
  11.         boolean flag = true;//模拟用户名存在
  13.         //3. 响应标记
  14.         response.getWriter().write("" + flag);
  17.     }
  19.     @Override
  20.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  21.         this.doGet(request, response);
  22.     }
  23. }

register.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>欢迎注册</title>
  6.     <link href="css/register.css" rel="stylesheet">
  7. </head>
  8. <body>
  10. <div class="form-div">
  11.     <div class="reg-content">
  12.         <h1>欢迎注册</h1>
  13.         <span>已有帐号？</span> <a href="login.html">登录</a>
  14.     </div>
  15.     <form id="reg-form" action="#" method="get">
  17.         <table>
  19.             <tr>
  20.                 <td>用户名</td>
  21.                 <td class="inputs">
  22.                     <input name="username" type="text" id="username">
  23.                     <br>
  24.                     <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
  25.                 </td>
  27.             </tr>
  29.             <tr>
  30.                 <td>密码</td>
  31.                 <td class="inputs">
  32.                     <input name="password" type="password" id="password">
  33.                     <br>
  34.                     <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
  35.                 </td>
  36.             </tr>
  39.             <tr>
  40.                 <td>验证码</td>
  41.                 <td class="inputs">
  42.                     <input name="checkCode" type="text" id="checkCode">
  43.                     <img src="imgs/a.jpg">
  44.                     <a href="#" id="changeImg">看不清？</a>
  45.                 </td>
  46.             </tr>
  48.         </table>
  50.         <div class="buttons">
  51.             <input value="注 册" type="submit" id="reg_btn">
  52.         </div>
  53.         <br class="clear">
  54.     </form>
  56. </div>
  58. <script>
  60.     //1. 给用户名输入框绑定 失去焦点事件
  61.     document.getElementById("username").onblur = function () {
  62.         //2. 发送ajax请求
  63.         // 获取用户名的值
  64.         var username = this.value;
  66.         //2.1. 创建核心对象
  67.         var xhttp;
  68.         if (window.XMLHttpRequest) {
  69.             xhttp = new XMLHttpRequest();
  70.         } else {
  71.             // code for IE6, IE5
  72.             xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  73.         }
  74.         //2.2. 发送请求
  75.         xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);
  76.         xhttp.send();
  78.         //2.3. 获取响应
  79.         xhttp.onreadystatechange = function() {
  80.             if (this.readyState == 4 && this.status == 200) {
  81.                 //alert(this.responseText);
  82.                 //判断
  83.                 if(this.responseText == "true"){
  84.                     //用户名存在，显示提示信息
  85.                     document.getElementById("username_err").style.display = '';
  86.                 }else {
  87.                     //用户名不存在 ，清除提示信息
  88.                     document.getElementById("username_err").style.display = 'none';
  89.                 }
  90.             }
  91.         };
  93.     }
  98. </script>
  99. </body>
  100. </html>

四、Axios框架

8f3897fed45f4589993ae49478f77078.png

Servlet：

  1. @WebServlet("/axiosServlet")
  2. public class AxiosServlet extends HttpServlet {
  3.     @Override
  4.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  5.         System.out.println("get...");
  7.         //1. 接收请求参数
  8.         String username = request.getParameter("username");
  9.         System.out.println(username);
  11.         //2. 响应数据
  12.         response.getWriter().write("hello Axios~");
  13.     }
  15.     @Override
  16.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  17.         System.out.println("post...");
  18.         this.doGet(request, response);
  19.     }
  20. }

HTML页面：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <script src="js/axios-0.18.0.js"></script>
  11. <script>
  12.     // //1.get
  13.     // axios({
  14.     //     method:"get",
  15.     //     url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
  16.     // }).then(function (resp){
  17.     //     alert(resp.data);
  18.     // })
  20.     //1.post
  21.     axios({
  22.         method:"post",
  23.         url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan",
  24.         data:"username=zhangsan"
  25.     }).then(function (resp){
  26.         alert(resp.data);
  27.     })
  29. </script>
  31. </body>
  32. </html>

8c23cfa260d041b79a8da21c94def78f.png

8c82d2a333e04e63bb913b5ac617a0d4.png

五、JSON

5.1 JSON概述

727b69ea97c64b82a7a56bf0c8f397ae.png

5.2 JSON基础语法

61fb744057e54deda202e143fa220fde.png

5.3 JSON数据和Java对象转换

6df0f3df295f42338933ec440cb58d24.png

4910975b3bdf4906b9da154dc32fd1ed.png

  1. public class FastJsonDemo {
  3.     public static void main(String[] args) {
  4.         //1.将Java对象转为JSON字符串
  5.         User user = new User();
  6.         user.setId(1);
  7.         user.setUsername("zhangsan");
  8.         user.setPassword("123");
  10.         String jsonString = JSON.toJSONString(user);
  12.         System.out.println(jsonString);
  15.         //2.将JSON字符串转为Java对象
  17.         User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}",User.class);
  19.         System.out.println(u);
  21.     }
  22. }

5.4 案例——查询所有（AJAX、JSON）

4820c2da5c184f218fc66f1bc48fb4f0.png

Servlet：

  1. @WebServlet("/selectAllServlet")
  2. public class SelectAllServlet extends HttpServlet {
  3.     private BrandService brandService = new BrandService();
  5.     @Override
  6.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  7.         //1.调用Service查询
  8.         List<Brand> brands = brandService.selectAll();
  10.         //2.将集合转换为JSON数据    序列化
  11.         String jsonString = JSON.toJSONString(brands);
  13.         //3.响应数据
  14.         response.setContentType("text/json;charset=utf-8");
  15.         response.getWriter().write(jsonString);
  16.     }
  18.     @Override
  19.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  20.         this.doGet(request, response);
  21.     }
  22. }

brand.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <a href="addBrand.html"><input type="button" value="新增"></a><br>
  9. <hr>
  10. <table id="brandTable" border="1" cellspacing="0" width="100%">
  12. <!--    <tr align="center">-->
  13. <!--        <td>1</td>-->
  14. <!--        <td>三只松鼠</td>-->
  15. <!--        <td>三只松鼠</td>-->
  16. <!--        <td>100</td>-->
  17. <!--        <td>三只松鼠，好吃不上火</td>-->
  18. <!--        <td>启用</td>-->
  19. <!--        <td><a href="#">修改</a> <a href="#">删除</a></td>-->
  20. <!--    </tr>-->
  22. <!--    <tr align="center">-->
  23. <!--        <td>2</td>-->
  24. <!--        <td>优衣库</td>-->
  25. <!--        <td>优衣库</td>-->
  26. <!--        <td>10</td>-->
  27. <!--        <td>优衣库，服适人生</td>-->
  28. <!--        <td>禁用</td>-->
  30. <!--        <td><a href="#">修改</a> <a href="#">删除</a></td>-->
  31. <!--    </tr>-->
  33. <!--    <tr align="center">-->
  34. <!--        <td>3</td>-->
  35. <!--        <td>小米</td>-->
  36. <!--        <td>小米科技有限公司</td>-->
  37. <!--        <td>1000</td>-->
  38. <!--        <td>为发烧而生</td>-->
  39. <!--        <td>启用</td>-->
  41. <!--        <td><a href="#">修改</a> <a href="#">删除</a></td>-->
  42. <!--    </tr>-->
  43. </table>
  45. <script src="js/axios-0.18.0.js"></script>
  47. <script>
  48.    //1.当页面加载完成后，发送AJAX请求
  49.    window.onload = function (){
  50.        //2.发送ajax请求
  51.        axios({
  52.            method:"get",
  53.            url:"http://localhost:8080/brand-demo/selectAllServlet"
  54.        }).then(function (resp){
  55.             //获取数据
  56.            let brands = resp.data;
  57.            let tableData = "<tr>\n" +
  58.                "        <th>序号</th>\n" +
  59.                "        <th>品牌名称</th>\n" +
  60.                "        <th>企业名称</th>\n" +
  61.                "        <th>排序</th>\n" +
  62.                "        <th>品牌介绍</th>\n" +
  63.                "        <th>状态</th>\n" +
  64.                "        <th>操作</th>\n" +
  65.                "    </tr>";
  67.            for (let i = 0; i < brands.length; i++) {
  68.                let brand = brands[i];
  70.                tableData +=" <tr align=\"center\">\n" +
  71.                    "        <td>"+(i+1)+"</td>\n" +
  72.                    "        <td>"+brand.brandName+"</td>\n" +
  73.                    "        <td>"+brand.companyName+"</td>\n" +
  74.                    "        <td>"+brand.ordered+"</td>\n" +
  75.                    "        <td>"+brand.description+"</td>\n" +
  76.                    "        <td>"+brand.status+"</td>\n" +
  77.                    "\n" +
  78.                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
  79.                    "    </tr>"
  80.            }
  81.            //设置显示表格数据
  82.            document.getElementById("brandTable").innerHTML = tableData;
  83.        })
  84.    }
  87. </script>
  90. </body>
  91. </html>

5.5 案例——新增品牌

946c004e78cb460bb0357e8898f18a11.png

Servlet：

  1. @WebServlet("/addServlet")
  2. public class AddServlet extends HttpServlet {
  4.     private BrandService brandService = new BrandService();
  6.     @Override
  7.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  9.         //1. 接收数据,request.getParameter 不能接收json的数据
  10.        /* String brandName = request.getParameter("brandName");
  11.         System.out.println(brandName);*/
  13.         // 获取请求体数据
  14.         BufferedReader br = request.getReader();
  15.         String params = br.readLine();
  17.         // 将JSON字符串转为Java对象
  18.         Brand brand = JSON.parseObject(params, Brand.class);
  21.         //2. 调用service 添加
  22.         brandService.add(brand);
  24.         //3. 响应成功标识
  25.         response.getWriter().write("success");
  26.     }
  28.     @Override
  29.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  30.         this.doGet(request, response);
  31.     }
  32. }

html页面：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>添加品牌</title>
  7. </head>
  8. <body>
  9. <h3>添加品牌</h3>
  10. <form action="" method="post">
  11.     品牌名称：<input id="brandName" name="brandName"><br>
  12.     企业名称：<input id="companyName" name="companyName"><br>
  13.     排序：<input id="ordered" name="ordered"><br>
  14.     描述信息：<textarea rows="5" cols="20" id="description" name="description"></textarea><br>
  15.     状态：
  16.     <input type="radio" name="status" value="0">禁用
  17.     <input type="radio" name="status" value="1">启用<br>
  19.     <input type="button" id="btn"  value="提交">
  20. </form>
  22. <script src="js/axios-0.18.0.js"></script>
  24. <script>
  25.     //1.给button按钮绑定单击事件
  26.     document.getElementById("btn").onclick = function (){
  28.         //将表单数据转为json
  29.         var formData = {
  30.             brandName: "",
  31.             companyName: "",
  32.             ordered: "",
  33.             description: "",
  34.             status: ""
  35.         }
  37.         //获取表单数据
  38.         let brandName = document.getElementById("brandName").value;
  39.         //设置数据
  40.         formData.brandName = brandName;
  42.         //获取表单数据
  43.         let companyName = document.getElementById("companyName").value;
  44.         //设置数据
  45.         formData.companyName = companyName;
  47.         //获取表单数据
  48.         let ordered = document.getElementById("ordered").value;
  49.         //设置数据
  50.         formData.ordered = ordered;
  52.         //获取表单数据
  53.         let description = document.getElementById("description").value;
  54.         //设置数据
  55.         formData.description = description; //获取表单数据
  57.         let status = document.getElementsByName("status");
  58.         for (let i = 0; i < status.length; i++) {
  59.             if (status[i].spellcheck){
  60.                 //
  61.                 formData.status = status[i].value;
  62.             }
  63.         }
  65.         console.log(formData);
  66.         //2.发送ajax请求
  67.         axios({
  68.             method:"post",
  69.             url:"http://localhost:8080/brand-demo/addServlet",
  70.             data:formData
  71.         }).then(function (resp){
  72.             //判断响应数据是否为success
  73.             if (resp.data == "success"){
  74.                 //成功则跳转到品牌列表
  75.                 location.href = "http://localhost:8080/brand-demo/brand.html"
  76.             }
  77.         })
  78.     }
  79. </script>
  80. </body>
  81. </html>

发表评论

表情：
评论列表 （有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读