零基础学JavaWeb开发（十四）之 Ajax

出世&入世

于 2023-01-19 22:42:48 发布

阅读量1.2k

点赞数

分类专栏： JavaWeb Java 文章标签： ajax javascript 前端 java web

本文链接：https://blog.csdn.net/weixin_54828627/article/details/128737692

版权

Java 同时被 2 个专栏收录

100 篇文章 6 订阅

订阅专栏

JavaWeb

29 篇文章 2 订阅

订阅专栏

二十、Ajax

1、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：AJAX 简介 | 菜鸟教程

axios 介绍

1.axios 是一个专注于网络请求的库，核心负责发请求和拿数据

在后面的vue react都会用axios来请求数据（类似于后端 httpclient）

2.Axios，是一个基于promise [5] 的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

3.Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

axios 发送get/post请求

页面引入axios cdn依赖

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  // 1. 调用 axios 方法得到的返回值是 Promise 对象
   axios({
     // 请求方式
     method: 'GET',
     // 请求的地址
     url: '接口地址',
     // URL 中的查询参数
     params: {
       id: 1
     }
   }).then(function (result) {
     console.log(result)
   })

<%--
     Created by IntelliJ IDEA.
     User: mayikt
     Date: 2022/6/8
     Time: 15:48
     To change this template use File | Settings | File Templates.
     --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>axios</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function mayiktAxios() {
            // 1. 调用 axios 方法得到的返回值是 Promise 对象
            axios({
                // 请求方式
                method: 'GET',
                // 请求的地址
                url: 'http://localhost:8080/${pageContext.request.contextPath}/axiosServlet',
                // URL 中的查询参数
                params: {
                    name: "mayikt",
                    age: 22
                }
            }).then(function (result) {
                alert(result.data);
            })

        }
    </script>
</head>
<body>

<input type="button" value="发送ajax" onclick="mayiktAxios()"/>

</body>
</html>

package com.mayikt.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;


@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter writer = resp.getWriter();
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        writer.print("mayikt,name:" + name + ",age:" + age);
        writer.close();
    }
}

axios验证用户名称是否存在

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

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

package com.mayikt.servlet;

import com.mayikt.entity.MayiktUserEntity;
import com.mayikt.service.MayikUsertService;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/exUserNameServlet")
public class ExUserNameServlet extends HttpServlet {
    
    private MayikUsertService mayikUsertService = new MayikUsertService();
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        //1.获取到用户输入的userName参数值
        String userName = req.getParameter("userName");
        //2.调用数据库根据userName查询用户名称是否存在
        MayiktUserEntity mayiktUserEntity = mayikUsertService.findByUserName(userName);
        PrintWriter writer = resp.getWriter();
        if (mayiktUserEntity != null) {
            writer.print("该用户" + userName + "已经存在的 无法注册!");
        }
        writer.close();
    }
}

<%--
  Created by IntelliJ IDEA.
  User: mayikt
  Date: 2022/6/6
  Time: 17:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>注册页面</title>
    <form action="/mayikt_session_war_exploded/register" method="post">
        <label>用户名: </label><input type="text" name="userName" onkeyup="mayiktAxios(this)"/><br>
        <label>密&nbsp&nbsp&nbsp码: </label><input type="password" name="userPwd"/><br>
        <label>验证码: </label><input type="text" name="code"/><img id="exchangecode" src="VerifycodeServlet">
        <a id="ecode" href="#">看不清？换一张图片</a><br>
        <span id="error" style="color: red">${errorMsg}</span>
        <input type="submit" value="注册"/>
    </form>
    <script type="text/javascript">
        window.onload = function () {
            //获取img标签的对象
            img = document.getElementById("exchangecode");
            img.onclick = function () {
                //加时间戳,避免浏览器缓存
                var date = new Date().getTime()
                img.src = "VerifycodeServlet?" + date;
            }
            //获取a标签的对象
            ec = document.getElementById("ecode");
            ec.onclick = function () {
                //加时间戳
                var date = new Date().getTime()
                img.src = "VerifycodeServlet?" + date;
            }
        }

    </script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function mayiktAxios(object) {
            // 1.接受用户输入的userName
            var userName = object.value;
            // 2.使用Axios 发送ajax请求验证 userName是否存在的
            axios({
                // 请求方式
                method: 'GET',
                // 请求的地址
                url: 'http://localhost:8080${pageContext.request.contextPath}/exUserNameServlet',
                // URL 中的查询参数
                params: {
                    userName: userName,
                }
            }).then(function (result) {
                //定位 span  id 名称 error 修改
                document.getElementById("error").innerText = result.data;
            })
        }
    </script>
</head>
</html>

2、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，不常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonDemo</title>
    <script>
        // 1.定义json
        var json1 = {name: "mayikt", age: 22, isFlag: true};
        alert(json1.name);
        alert(json1.age);
        alert(json1.isFlag);
        // 2.定义json数组
        var jsonArr = {code: 200, data: [{name: "mayikt", age: 22}, {name: "meite", age: 22}]};
        alert(jsonArr.code);
        alert(jsonArr.data[0].name);
        var userArr = jsonArr.data;
        for (var i = 0; i < userArr.length; i++) {
            alert(userArr[i].name + "," + userArr[i].age);
        }
    </script>
</head>
<body>

</body>
</html>

fastjson用法

常见解析器：JsonLib，Gson，fastjson(阿里)，jackson（Spring MVC内置解析器）

文档：javaweb开发相关资料下载.notea

链接：有道云笔记

package com.mayikt;

import com.alibaba.fastjson.JSONObject;
import com.mayikt.entity.MayiktUserEntity;

import java.util.ArrayList;


public class Test01 {
    public static void main(String[] args) {
        //1.将数据对象变成json（字符串类型）
        MayiktUserEntity user1 = new MayiktUserEntity(1, "mayikt", "mayikt");
        MayiktUserEntity user2 = new MayiktUserEntity(1, "mayikt", "mayikt");
        String json1 = JSONObject.toJSONString(user1);
        System.out.println(json1);
        //2.嵌套json
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("code", 200);
        jsonObject.put("msg", "ok");
        //data值 数组类型
        ArrayList<MayiktUserEntity> mayiktUserEntities = new ArrayList<>();
        mayiktUserEntities.add(user1);
        mayiktUserEntities.add(user2);
        jsonObject.put("data", mayiktUserEntities);
        System.out.println(jsonObject.toJSONString());
    }
}

package com.mayikt;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.alibaba.fastjson.JSONPObject;
import com.mayikt.entity.MayiktUserEntity;


public class Test02 {
    public static void main(String[] args) {
        String jsonStr = "{\"msg\":\"ok\",\"code\":200,\"data\":[{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"},{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"}]}";
        // string类型-----jsonobject----jsonobject
        JSONObject jsonObject = JSONObject.parseObject(jsonStr);
//        Integer code = (Integer) jsonObject.get("code");
        Integer code = jsonObject.getInteger("code");
        String msg = jsonObject.getString("msg");
        System.out.println(code + "," + msg);
        JSONArray data = jsonObject.getJSONArray("data");
        for (int i = 0; i < data.size(); i++) {
            JSONObject object = (JSONObject) data.get(i);
            Integer id = object.getInteger("id");
            String userName = object.getString("userName");
            String userPwd = object.getString("userPwd");
            MayiktUserEntity mayiktUserEntity = new MayiktUserEntity(id, userName, userPwd);
            System.out.println(mayiktUserEntity);
        }
    }
}

package com.mayikt;

import com.alibaba.fastjson.JSONObject;
import com.mayikt.entity.Result;


public class Test03 {
    public static void main(String[] args) {
        String jsonStr = "{\"msg\":\"ok\",\"code\":200,\"data\":[{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"},{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"}]}";
        JSONObject jsonObject = JSONObject.parseObject(jsonStr);
        Result result = JSONObject.parseObject(jsonStr, Result.class);
        // java序列化技术 将 json变成对象
        System.out.println(result);
    }
}

package com.mayikt.entity;

import java.util.List;

public class Result {
    private Integer code;
    private String msg;
    private List<MayiktUserEntity> data;

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }


    public List<MayiktUserEntity> getData() {
        return data;
    }

    public void setData(List<MayiktUserEntity> data) {
        this.data = data;
    }

    @Override
    public String toString() {
        return "Result{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", data=" + data +
                '}';
    }
}

    axios({
        method: "post",
        url: "${pageContext.request.contextPath}/user/addUser",
        data: JSON.stringify(userList),
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        }
    }).then(resp => {

    })

出世&入世

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
零基础学JavaWeb开发（十四）之 Ajax

1、axios（ajax）发送请求ajax概Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页
复制链接

扫一扫