ajax

axios（ajax）发送请求

ajax概述

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
参考 原生ajax：https://www.runoob.com/php/php-ajax-intro.html

axios 介绍

1.axios 是一个专注于网络请求的库，核心负责发请求和拿数据
在后面的vue react都会用axios来请求数据（类似于后端 httpclient）
2.Axios，是一个基于promise [5] 的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
3.https://www.axios-http.cn/

axios 发送get/post请求

页面引入axios cdn依赖
](https://unpkg.com/axios/dist/axios.min.js">)

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  3.   // 1. 调用 axios 方法得到的返回值是 Promise 对象
  4.    axios({
  5.      // 请求方式
  6.      method: 'GET',
  7.      // 请求的地址
  8.      url: '接口地址',
  9.      // URL 中的查询参数
  10.      params: {
  11.        id: 1
  12.      }
  13.    }).then(function (result) {
  14.      console.log(result)
  15.    })
  1. <%--
  2.      Created by IntelliJ IDEA.
  3.      User: mayikt
  4.      Date: 2022/6/8
  5.      Time: 15:48
  6.      To change this template use File | Settings | File Templates.
  7.      --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <html>
  10. <head>
  11.     <title>axios</title>
  12.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  13.     <script>
  14.         function mayiktAxios() {
  15.             // 1. 调用 axios 方法得到的返回值是 Promise 对象
  16.             axios({
  17.                 // 请求方式
  18.                 method: 'GET',
  19.                 // 请求的地址
  20.                 url: 'http://localhost:8080/${pageContext.request.contextPath}/axiosServlet',
  21.                 // URL 中的查询参数
  22.                 params: {
  23.                     name: "mayikt",
  24.                     age: 22
  25.                 }
  26.             }).then(function (result) {
  27.                 alert(result.data);
  28.             })
  30.         }
  31.     </script>
  32. </head>
  33. <body>
  35. <input type="button" value="发送ajax" onclick="mayiktAxios()"/>
  37. </body>
  38. </html>
  1. package com.mayikt.servlet;
  3. import jakarta.servlet.ServletException;
  4. import jakarta.servlet.annotation.WebServlet;
  5. import jakarta.servlet.http.HttpServlet;
  6. import jakarta.servlet.http.HttpServletRequest;
  7. import jakarta.servlet.http.HttpServletResponse;
  9. import java.io.IOException;
  10. import java.io.PrintWriter;
  12. /**
  13. * @author 余胜军
  14. * @ClassName AxiosServlet
  15. * @qq 644064779
  16. * @addres www.mayikt.com
  17. * 微信:yushengjun644
  18. */
  19. @WebServlet("/axiosServlet")
  20. public class AxiosServlet extends HttpServlet {
  21.     @Override
  22.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  23.         doGet(req, resp);
  24.     }
  26.     @Override
  27.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  28.         PrintWriter writer = resp.getWriter();
  29.         String name = req.getParameter("name");
  30.         String age = req.getParameter("age");
  31.         writer.print("mayikt,name:" + name + ",age:" + age);
  32.         writer.close();
  33.     }
  34. }

axios验证用户名称是否存在

需求：当我们用户输入用户名称之后（会使用ajax验证用户名称是否已经存在 如果存在的话 则提示 该用户名称是已经存在的）

onkeyup—-监听用户输入完内容 走监听方法

  1. package com.mayikt.servlet;
  3. import com.mayikt.entity.MayiktUserEntity;
  4. import com.mayikt.service.MayikUsertService;
  5. import jakarta.servlet.ServletException;
  6. import jakarta.servlet.annotation.WebServlet;
  7. import jakarta.servlet.http.HttpServlet;
  8. import jakarta.servlet.http.HttpServletRequest;
  9. import jakarta.servlet.http.HttpServletResponse;
  11. import java.io.IOException;
  12. import java.io.PrintWriter;
  14. /**
  15. * http://localhost:8080/mayikt_session_war_exploded/exUserNameServlet?name=1
  16. * @author 余胜军
  17. * @ClassName ExUserNameServlet
  18. * @qq 644064779
  19. * @addres www.mayikt.com
  20. * 微信:yushengjun644
  21. */
  22. @WebServlet("/exUserNameServlet")
  23. public class ExUserNameServlet extends HttpServlet {
  25.     private MayikUsertService mayikUsertService = new MayikUsertService();
  27.     @Override
  28.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  29.         resp.setContentType("text/html;charset=utf-8");
  30.         //1.获取到用户输入的userName参数值
  31.         String userName = req.getParameter("userName");
  32.         //2.调用数据库根据userName查询用户名称是否存在
  33.         MayiktUserEntity mayiktUserEntity = mayikUsertService.findByUserName(userName);
  34.         PrintWriter writer = resp.getWriter();
  35.         if (mayiktUserEntity != null) {
  36.             writer.print("该用户" + userName + "已经存在的 无法注册!");
  37.         }
  38.         writer.close();
  39.     }
  40. }
  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: mayikt
  4.   Date: 2022/6/6
  5.   Time: 17:12
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12.     <title>注册页面</title>
  13.     <form action="/mayikt_session_war_exploded/register" method="post">
  14.         <label>用户名: </label><input type="text" name="userName" onkeyup="mayiktAxios(this)"/><br>
  15.         <label>密&nbsp&nbsp&nbsp码: </label><input type="password" name="userPwd"/><br>
  16.         <label>验证码: </label><input type="text" name="code"/><img id="exchangecode" src="VerifycodeServlet">
  17.         <a id="ecode" href="#">看不清？换一张图片</a><br>
  18.         <span id="error" style="color: red">${errorMsg}</span>
  19.         <input type="submit" value="注册"/>
  20.     </form>
  21.     <script type="text/javascript">
  22.         window.onload = function () {
  23.             //获取img标签的对象
  24.             img = document.getElementById("exchangecode");
  25.             img.onclick = function () {
  26.                 //加时间戳,避免浏览器缓存
  27.                 var date = new Date().getTime()
  28.                 img.src = "VerifycodeServlet?" + date;
  29.             }
  30.             //获取a标签的对象
  31.             ec = document.getElementById("ecode");
  32.             ec.onclick = function () {
  33.                 //加时间戳
  34.                 var date = new Date().getTime()
  35.                 img.src = "VerifycodeServlet?" + date;
  36.             }
  37.         }
  39.     </script>
  40.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  41.     <script>
  42.         function mayiktAxios(object) {
  43.             // 1.接受用户输入的userName
  44.             var userName = object.value;
  45.             // 2.使用Axios 发送ajax请求验证 userName是否存在的
  46.             axios({
  47.                 // 请求方式
  48.                 method: 'GET',
  49.                 // 请求的地址
  50.                 url: 'http://localhost:8080${pageContext.request.contextPath}/exUserNameServlet',
  51.                 // URL 中的查询参数
  52.                 params: {
  53.                     userName: userName,
  54.                 }
  55.             }).then(function (result) {
  56.                 //定位 span  id 名称 error 修改
  57.                 document.getElementById("error").innerText = result.data;
  58.             })
  59.         }
  60.     </script>
  61. </head>
  62. </html>

json

json基础语法

JSON: JavaScript Object Notation(JavaScript 对象表示法)；
JSON 是存储和交换文本信息的语法。类似 XML；
JSON —-数据交换格式
客户端与服务器端之间通讯 —-数据交换格式
JSON 体积XML 更小减少带宽传输
JSON 比 XML 更小、更快，更易解析；
json对象
{
name:”mayikt”,
age:22,
isFlag:true
}
如果该json值是为最后一个的情况下 不需要写,
json数组
[
{
name:”mayikt1”,
age:22,
isFlag:true
},
{
name:”mayikt2”,
age:22,
isFlag:true
}
]
{
code:200,
msg:”ok”,
data:[
{
name:”mayikt2”,
age:22,
isFlag:true
},
{
name:”mayikt2”,
age:22,
isFlag:true
}
]
}

1、JSON是由键值对构成的；
2、键要用引号（单双都行）引起，也可以不引；
3、取值范围：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
null，不常用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jsonDemo</title>
  6.     <script>
  7.         // 1.定义json
  8.         var json1 = {name: "mayikt", age: 22, isFlag: true};
  9.         alert(json1.name);
  10.         alert(json1.age);
  11.         alert(json1.isFlag);
  12.         // 2.定义json数组
  13.         var jsonArr = {code: 200, data: [{name: "mayikt", age: 22}, {name: "meite", age: 22}]};
  14.         alert(jsonArr.code);
  15.         alert(jsonArr.data[0].name);
  16.         var userArr = jsonArr.data;
  17.         for (var i = 0; i < userArr.length; i++) {
  18.             alert(userArr[i].name + "," + userArr[i].age);
  19.         }
  20.     </script>
  21. </head>
  22. <body>
  24. </body>
  25. </html>

fastjson用法

常见解析器：JsonLib，Gson，fastjson(阿里)，jackson（Spring MVC内置解析器）
文档：javaweb开发相关资料下载.notea
链接：http://note.youdao.com/noteshare?id=61e2cc939390acc9c7e5017907e98044&sub=DAABBA2F350445D2AC6879CCC3F46EA7
image.png

  1. package com.mayikt;
  3. import com.alibaba.fastjson.JSONObject;
  4. import com.mayikt.entity.MayiktUserEntity;
  6. import java.util.ArrayList;
  8. /**
  9.  * @author 余胜军
  10.  * @ClassName Test01
  11.  * @qq 644064779
  12.  * @addres www.mayikt.com
  13.  * 微信:yushengjun644
  14.  */
  15. public class Test01 {
  16.     public static void main(String[] args) {
  17.         //1.将数据对象变成json（字符串类型）
  18.         MayiktUserEntity user1 = new MayiktUserEntity(1, "mayikt", "mayikt");
  19.         MayiktUserEntity user2 = new MayiktUserEntity(1, "mayikt", "mayikt");
  20.         String json1 = JSONObject.toJSONString(user1);
  21.         System.out.println(json1);
  22.         //2.嵌套json
  23.         JSONObject jsonObject = new JSONObject();
  24.         jsonObject.put("code", 200);
  25.         jsonObject.put("msg", "ok");
  26.         //data值 数组类型
  27.         ArrayList<MayiktUserEntity> mayiktUserEntities = new ArrayList<>();
  28.         mayiktUserEntities.add(user1);
  29.         mayiktUserEntities.add(user2);
  30.         jsonObject.put("data", mayiktUserEntities);
  31.         System.out.println(jsonObject.toJSONString());
  32.     }
  33. }
  35. package com.mayikt;
  37. import com.alibaba.fastjson.JSONArray;
  38. import com.alibaba.fastjson.JSONObject;
  39. import com.alibaba.fastjson.JSONPObject;
  40. import com.mayikt.entity.MayiktUserEntity;
  42. /**
  43.  * @author 余胜军
  44.  * @ClassName Test02
  45.  * @qq 644064779
  46.  * @addres www.mayikt.com
  47.  * 微信:yushengjun644
  48.  */
  49. public class Test02 {
  50.     public static void main(String[] args) {
  51.         String jsonStr = "{\"msg\":\"ok\",\"code\":200,\"data\":[{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"},{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"}]}";
  52.         // string类型-----jsonobject----jsonobject
  53.         JSONObject jsonObject = JSONObject.parseObject(jsonStr);
  54. //        Integer code = (Integer) jsonObject.get("code");
  55.         Integer code = jsonObject.getInteger("code");
  56.         String msg = jsonObject.getString("msg");
  57.         System.out.println(code + "," + msg);
  58.         JSONArray data = jsonObject.getJSONArray("data");
  59.         for (int i = 0; i < data.size(); i++) {
  60.             JSONObject object = (JSONObject) data.get(i);
  61.             Integer id = object.getInteger("id");
  62.             String userName = object.getString("userName");
  63.             String userPwd = object.getString("userPwd");
  64.             MayiktUserEntity mayiktUserEntity = new MayiktUserEntity(id, userName, userPwd);
  65.             System.out.println(mayiktUserEntity);
  66.         }
  67.     }
  68. }
  70. package com.mayikt;
  72. import com.alibaba.fastjson.JSONObject;
  73. import com.mayikt.entity.Result;
  75. /**
  76.  * @author 余胜军
  77.  * @ClassName Test03
  78.  * @qq 644064779
  79.  * @addres www.mayikt.com
  80.  * 微信:yushengjun644
  81.  */
  82. public class Test03 {
  83.     public static void main(String[] args) {
  84.         String jsonStr = "{\"msg\":\"ok\",\"code\":200,\"data\":[{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"},{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"}]}";
  85.         JSONObject jsonObject = JSONObject.parseObject(jsonStr);
  86.         Result result = JSONObject.parseObject(jsonStr, Result.class);
  87.         // java序列化技术 将 json变成对象
  88.         System.out.println(result);
  89.     }
  90. }
  91. package com.mayikt.entity;
  93. import java.util.List;
  95. /**
  96.  * @author 余胜军
  97.  * @ClassName Result
  98.  * @qq 644064779
  99.  * @addres www.mayikt.com
  100.  * 微信:yushengjun644
  101.  */
  102. public class Result {
  103.     private Integer code;
  104.     private String msg;
  105.     private List<MayiktUserEntity> data;
  107.     public Integer getCode() {
  108.         return code;
  109.     }
  111.     public void setCode(Integer code) {
  112.         this.code = code;
  113.     }
  115.     public String getMsg() {
  116.         return msg;
  117.     }
  119.     public void setMsg(String msg) {
  120.         this.msg = msg;
  121.     }
  124.     public List<MayiktUserEntity> getData() {
  125.         return data;
  126.     }
  128.     public void setData(List<MayiktUserEntity> data) {
  129.         this.data = data;
  130.     }
  132.     @Override
  133.     public String toString() {
  134.         return "Result{" +
  135.                 "code=" + code +
  136.                 ", msg='" + msg + '\'' +
  137.                 ", data=" + data +
  138.                 '}';
  139.     }
  140. }
  1.     axios({
  2.         method: "post",
  3.         url: "${pageContext.request.contextPath}/user/addUser",
  4.         data: JSON.stringify(userList),
  5.         headers: {
  6.             'Content-Type': 'application/json;charset=UTF-8'
  7.         }
  8.     }).then(resp => {
  10.     })