Vue异步操作发送AJAX请求

news2024/10/6 1:58:59

5. Vue异步操作

1 axios介绍

  • 在Vue中发送异步请求，本质上还是AJAX。我们可以使用axios这个插件来简化操作！

  • 使用步骤
    1.引入axios核心js文件。
    2.调用axios对象的方法来发起异步请求。
    3.调用axios对象的方法来处理响应的数据。

  • axios常用方法

    在这里插入图片描述

  • 代码实现

    • html代码
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步操作</title>
    <script src="js/vue.js"></script>
    <!--
        引入axios核心js文件
    -->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    {{name}}
    <!--全称写法 v-on:click="send()"   -->
    <button @click="send()">发起请求</button>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"张三",
            age:18
        },
        methods:{
            send(){
                //1.发送异步请求
                /*
                    说明：
                        1.后台url的地址   "http://localhost:8080/axiosDemo01Servlet"
                */
                axios.get("http://localhost:8080/axiosDemo01Servlet")
                     .then(resp=>{
                         console.log(resp.data);
                     });
            }
        }
    });
</script>
</html>
    • java代码 后续后讲解，这里不用理会
    package com.itheima.sh.a_vue_axios_01;

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;

@WebServlet("/axiosDemo01Servlet")
public class AxiosDemo01Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("hello vue");
        response.getWriter().print("你好vue");
    }
}

2 案例练习

案例: 点击登录时将用户信息提交到后台，并接收后台服务器响应的好友信息显示到页面上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步请求案例</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>

</head>
<body>
    <!--
    vue
        1. 视图
        2. 脚本
        data改变,视图会随之改变
        我们从服务器获取数据,只要修改data,视图就会改变
        我们无需在js中直接操作视图了
-->
<div id="div">
    <h1>登录页面</h1>
    <!--
        v-model="user.username" :使用双向数据表绑定
    -->
    <input type="text" name="username" placeholder="请输入用户名" v-model="user.username"> <br>
    <input type="password" name="password" placeholder="请输入密码" v-model="user.password"><br>
    <button @click="send()">登录</button>


    <h1>主页: 显示好友列表</h1>
    <ul>
        <li v-for="element in list">
            {{element.id}},{{element.name}},{{element.age}}
        </li>
    </ul>
</div>

</body>
<script>
    new Vue({
        el: "#div",
        data: {
             //TODO; 由于表单双向数据绑定的存在,当用户操作表单时,user就会有数据(json格式)
            user: {},
            list: []
        },
        methods: {
            send: function () {
                //1.当点击登录按钮，向后台发送请求获取好友列表，并将用户名和密码数据提交到后台
                /*
                    说明：
                        1.向后台请求地址：http://localhost:8080/axiosDemo02Servlet
                        2.this.user就是json格式的数据：{"username":"锁哥","password":"1234"}
                */
                axios.post("http://localhost:8080/axiosDemo02Servlet",this.user)//this.user就是json格式的数据：{"username":"锁哥","password":"1234"}
                     .then(resp=>{
                         //2.接收响应数据
                         let obj = resp.data;
                         //3.判断
                         if(obj.flag){
                             //查询成功
                             //4.将后台响应的集合数据赋值给data中的list
                             this.list=obj.valueData;
                         }else{
                             //查询失败
                         }
                     });
            }
        }
    });
</script>
</html>

后台代码：（后面学习）

package com.itheima.sh.a_vue_axios_01;


import com.itheima.sh.util.BaseController;

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.util.ArrayList;
import java.util.Collections;

@WebServlet("/axiosDemo02Servlet")
public class AxiosDemo02Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {

            //1.创建集合对象保存多个好友
            ArrayList<Friend> list = new ArrayList<>();
            //2.向集合添加数据
            Collections.addAll(list, new Friend("001", "张三", 18), new Friend("002", "李四", 19),
                                new Friend("003", "王五", 20));
            //3.将list放到Result对象中
            Result result = new Result(true, "查询好友成功", list);
            //4.将result对象转换json并响应给前端
            BaseController.printResult(response, result);

        } catch (Exception e) {
            e.printStackTrace();
            try {
                //6.将list放到Result对象中
                Result result = new Result(false, "查询好友失败");
                //7.将result对象转换json并响应给前端
                BaseController.printResult(response, result);
            } catch (Exception exception) {
                exception.printStackTrace();
            }
        }
    }
}


package com.itheima01.vue;

import java.io.Serializable;

public class Friend implements Serializable {

    private String id;
    private String name;
    private Integer age;

    public Friend() {
    }

    public Friend(String id, String name, Integer age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}


package com.itheima01.vue;

import java.io.Serializable;

/*
    javaBean的规范  (java标准实体类)
    1. private属性
    2. public 无参构造
    3. public get/set 方法
    4. 实现serializable接口 (序列化)
 */
public class User implements Serializable {

    private String username;
    private String password;

    public User() {
    }

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
    //TODO: 自己采用字符串拼接的方式输出。
    public String toJson() {
        return "{\"username\":\""+username+"\",\"password\":"+password+"}";
    }
    public String getUsername() {
        return username;
    }

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

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}


package com.itheima01.vue;

import java.io.Serializable;

/*
    Result : 结果
 */
public class Result implements Serializable {
    private boolean flag;//执行结果，true为执行成功 false为执行失败
    private String message;//返回结果信息
    private Object data;//返回数据(如果是查询成功则设置,如果是其他情况则不设置)

    public Result() {
    }
    //失败,或者增删改
    public Result(boolean flag, String message){
        this.flag = flag;
        this.message = message;
    }
    //成功的查询
    public Result(boolean flag, String message, Object data) {
        this.flag = flag;
        this.message = message;
        this.data = data;
    }

    public boolean isFlag() {
        return flag;
    }

    public void setFlag(boolean flag) {
        this.flag = flag;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}



package com.itheima01.vue;

import com.alibaba.fastjson.JSON;

import javax.servlet.ServletInputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class BaseController {

    /**
     *  post请求参数为json格式的数据 转换成 javaBean
     */
    public static <T>T getBean(HttpServletRequest request,Class<T> clazz) throws IOException {
        ServletInputStream is = request.getInputStream();
        T t = JSON.parseObject(is, clazz);
        return t;
    }

    public static void printResult(HttpServletResponse response, Result result) throws IOException {
        response.setContentType("application/json;charset=utf-8");
        String json = JSON.toJSONString(result);
        response.getWriter().print(json);
    }
}


<dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!--fastjson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </dependency>
    </dependencies>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1900491.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

centos执行yum相关命令报错的可能原因

centos执行yum相关命令报错的可能原因

文章目录 1. 执行yum命令是报下面一大帕拉2. 安装某个包报错&#xff0c;找不到这个包 1. 执行yum命令是报下面一大帕拉 最后一行报错&#xff0c;在repo文件中找不到空baseurl&#xff1a;xxx / x86_64 执行这行命令把这个找不到的 xxx 禁掉即可sudo yum-config-manager --di…
阅读更多...
关于Unity粒子（2D序列帧粒子）的旋转、StartRotation值用脚本怎么动态设置

关于Unity粒子（2D序列帧粒子）的旋转、StartRotation值用脚本怎么动态设置

今天要用粒子做一个拖尾效果。由于对象的移动可以向任何方向&#xff0c;所以作为拖尾的粒子要根据方向做相应的旋转。 1.没有旋转的情况&#xff08;物体向下移动&#xff09;时&#xff0c;默认是下面这样的。 粒子发射器的形状是一个向上的长方形&#xff0c;粒子的移动方向…
阅读更多...
[FreeRTOS 功能应用] 互斥量 功能应用

[FreeRTOS 功能应用] 互斥量 功能应用

文章目录 一、基础知识点二、代码讲解三、结果演示四、代码下载 一、基础知识点 [FreeRTOS 基础知识] 互斥量 概念 [FreeRTOS 内部实现] 互斥量 本实验是基于STM32F103开发移植FreeRTOS实时操作系统&#xff0c;互斥量实战操作。 使用工具&#xff1a;Keil、串口工具 二、代码…
阅读更多...
Android增量更新----java版

Android增量更新----java版

一、背景 开发过程中&#xff0c;随着apk包越来越大&#xff0c;全量更新会使得耗时&#xff0c;同时浪费流量&#xff0c;为了节省时间&#xff0c;使用增量更新解决。网上很多文章都不是很清楚&#xff0c;没有手把手教学&#xff0c;使得很多初学者&#xff0c;摸不着头脑&a…
阅读更多...
【LabVIEW学习篇 - 2】：LabVIEW的编程特点

【LabVIEW学习篇 - 2】：LabVIEW的编程特点

文章目录 LabVIEW的编程特点图形编程天然并行运行基于数据流运行 LabVIEW的编程特点 图形编程 LabVIEW使用图形化的图形化编程语言&#xff08;G语言&#xff09;&#xff0c;用户通过在程序框图中拖放和连接各种节点&#xff08;Nodes&#xff09;来编写程序。每个节点代表一…
阅读更多...
C#Modbus通信

C#Modbus通信

目录 1&#xff0c;辅助工具。 2&#xff0c;初识Modbus。 3&#xff0c;基于ModbusRTU的通信。 3.1&#xff0c;RTU与ASCII模式区别 3.2&#xff0c;Modbus存储区 3.3&#xff0c;报文格式 3.4&#xff0c;异常代码 3.5&#xff0c;详细文档连接 。 3.6&#xff0c;代…
阅读更多...
mupdf加载PDF显示中文乱码

mupdf加载PDF显示中文乱码

现象 加载PDF显示乱码,提示非嵌入字体 non-embedded font using identity encoding调式 在pdf-font.c中加载字体 调试源码发现pdf文档的字体名字居然是GBK&#xff0c;估计又是哪个windows下写的pdf生成工具生成pdf 字体方法&#xff1a; static pdf_font_desc * load_cid…
阅读更多...
软通动力子公司鸿湖万联最新成果SwanLink AI亮相世界人工智能大会

软通动力子公司鸿湖万联最新成果SwanLink AI亮相世界人工智能大会

7月4日&#xff0c;2024世界人工智能大会暨人工智能全球治理高级别会议&#xff08;WAIC 2024&#xff09;在上海拉开帷幕&#xff0c;软通动力董事长兼首席执行官刘天文受邀出席开幕式。其间&#xff0c;软通动力携子公司鸿湖万联深度参与到大会各项活动中&#xff0c;并全面展…
阅读更多...
详解AT_dp_l Deque(区间动态规划)

详解AT_dp_l Deque(区间动态规划)

题目 思路 考虑模拟博弈过程。 题目可以看成:先手希望X - Y最大&#xff0c;后手希望X - Y最小。 显然游戏过程中剩下的数必然是连续的一段。设 dp[i,j]​ 表示剩下下标为 [i,j] 的数时&#xff0c;先手&#xff08;并非当前的先手而是开始时的先手&#xff0c;下同&#xf…
阅读更多...
12 Dockerfile详解

12 Dockerfile详解

目录 1. Dockerfile 2. Dockerfile构建过程 2.1. Dockerfile编写规则&#xff1a; 2.2. Docker执行Dockerfile的大致流程 2.3. 总结 3. Dockerfile指令 3.1. FROM 3.2. MAINTAINER 3.3. RUN 3.4. EXPOSE 3.5. WORKDIR 3.6. USER 3.7. ENV 3.8. VOLUME 3.9. ADD …
阅读更多...
CVE-2023-30212（xss漏洞）

CVE-2023-30212（xss漏洞）

简介 OURPHP版本<7.2.0存在XSS漏洞&#xff0c;攻击路径为/client/manage/ourphp_out.php。 过程 打开靶场 访问攻击路径/client/manage/ourphp_out.php 得到flag{354c7c41-cc23-4de5-be73-79cbbf384aba}
阅读更多...
Hasleo Backup Suite 一款专为Windows操作系统设计的免费数据备份与恢复软件，支持备份、恢复和克隆功能

Hasleo Backup Suite 一款专为Windows操作系统设计的免费数据备份与恢复软件，支持备份、恢复和克隆功能

数据安全是每位计算机用户都关心的重要问题。在日常使用中&#xff0c;我们经常面临文件丢失、系统崩溃或病毒感染等风险。为了解决这些问题&#xff0c;我们需要可靠且高效的数据备份与恢复工具。本文将介绍一款优秀的备份软件&#xff1a;Hasleo Backup Suite&#xff0c;它为…
阅读更多...
Python数据分析案例49——基于机器学习的垃圾邮件分类系统构建(朴素贝叶斯，支持向量机)

Python数据分析案例49——基于机器学习的垃圾邮件分类系统构建(朴素贝叶斯，支持向量机)

案例背景 trec06c是非常经典的邮件分类的数据&#xff0c;还是难能可贵的中文数据集。 这个数据集从一堆txt压缩包里面提取出来整理为excel文件还真不容不易&#xff0c;肯定要做一下文本分类。 虽然现在文本分类基本都是深度学习了&#xff0c;但是传统的机器学习也能做。本案…
阅读更多...
Python字符串处理常用的30种操作

Python字符串处理常用的30种操作

我们平时编写代码时&#xff0c;经常需要对字符串进行处理&#xff0c;本文详细介绍Python处理字符串常用的30种操作&#xff0c;并给出了对应的代码。 分割 使用split()方法将字符串按照指定的分隔符进行分割。 s "Hello,World" result s.split(","…
阅读更多...
解决分布式环境下session共享问题

解决分布式环境下session共享问题

在分布式环境下&#xff0c;session会存在两个问题 第一个问题:不同域名下&#xff0c;浏览器存储的jsessionid是没有存储的。比如登录时认证服务auth.gulimall.com存储了session&#xff0c;但是搜索服务search.gulimall.com是没有这个session的&#xff1b; 第二个问题&…
阅读更多...
hdu物联网硬件实验2 GPIO亮灯

hdu物联网硬件实验2 GPIO亮灯

学院 班级 学号 姓名 日期 成绩 实验题目 GPIO亮灯 实验目的 点亮三个灯闪烁频率为一秒 硬件原理 无 关键代码及注释 const int ledPin1 GREEN_LED; // the number of the LED pin const int ledPin2 YELLOW_LED; const int ledPin3 RED…
阅读更多...
E4.【C语言】练习：while和getchar的理解

E4.【C语言】练习：while和getchar的理解

#include <stdio.h> int main() {int ch 0;while ((ch getchar()) ! EOF){if (ch < 0 || ch>9)continue;putchar(ch);}return 0; } 理解上述代码 0-->48 9-->57 if行判断是否为数字&#xff0c;打印数字&#xff0c;不打印非数字
阅读更多...
干冰运输与存储中的温度监测：确保药品安全与合规性

干冰运输与存储中的温度监测：确保药品安全与合规性

在制药行业&#xff0c;干冰对于运输和储存对温度敏感的药品&#xff0c;如原料药API、疫苗、冻干物质和人体组织样本等至关重要。虹科ELPRO LIBERO系列干冰温度记录仪&#xff0c;能够为您提供专业的解决方案&#xff0c;定期监测和记录干冰运输和存储过程中的温度&#xff0c…
阅读更多...
字节码编程javassist之定义各种属性

字节码编程javassist之定义各种属性

写在前面 源码 。 本文看下如何使用javassist来定义属性。 1&#xff1a;程序 package com.dahuyou.javassist.generateFieldAndMethod;import javassist.*;import java.lang.reflect.Method;public class JustDoIt111 {public static void main(String[] args) throws Exce…
阅读更多...
使用京东云主机搭建幻兽帕鲁游戏联机服务器全流程，0基础教程

使用京东云主机搭建幻兽帕鲁游戏联机服务器全流程，0基础教程

使用京东云服务器搭建幻兽帕鲁Palworld游戏联机服务器教程&#xff0c;非常简单&#xff0c;京东云推出幻兽帕鲁镜像系统&#xff0c;镜像直接选择幻兽帕鲁镜像即可一键自动部署&#xff0c;不需要手动操作&#xff0c;真正的新手0基础部署幻兽帕鲁&#xff0c;阿腾云整理基于京…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023