Vue异步操作发送AJAX请求

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><!--vue1. 视图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/axiosDemo02Servlet2.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中的listthis.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;}@Overridepublic 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.rhkb.cn/news/370321.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

tobias实现支付宝支付

tobias实现支付宝支付

tobias是一个为支付宝支付SDK做的Flutter插件。 如何使用 你需要在pubspec.yaml中配置url_scheme。url_scheme是一个独特的字符串&#xff0c;用来重新启动你的app&#xff0c;但是请注意字符串“_”是不合法的。 在iOS端&#xff0c;你还需要配置并传入一个universal link。…
阅读更多...
使用Python绘制堆积柱形图

使用Python绘制堆积柱形图

使用Python绘制堆积柱形图 堆积柱形图效果代码 堆积柱形图 堆积柱形图&#xff08;Stacked Bar Chart&#xff09;是一种数据可视化图表&#xff0c;用于显示不同类别的数值在某一变量上的累积情况。每一个柱状条显示多个子类别的数值&#xff0c;子类别的数值在柱状条上堆积在…
阅读更多...
2.3.2 主程序和外部IO交互 （文件映射方式）----C#调用范例

2.3.2 主程序和外部IO交互 （文件映射方式）----C#调用范例

2.3.2 主程序和外部IO交互 &#xff08;文件映射方式&#xff09;----C#调用范例 效果显示 1 说明 1 .1 Test_IOServer是64bit 程序&#xff0c; BD_SharedIOServerd.dll 在 /Debug文件夹中 1 .2 Test_IOServer是32bit 程序&#xff0c; BD_SharedIOClientd.dll (32bit&#…
阅读更多...
CV03_mAP计算以及COCO评价标准

CV03_mAP计算以及COCO评价标准

COCO数据集回顾&#xff1a;CV02_超强数据集&#xff1a;MSCOCO数据集的简单介绍-CSDN博客 1.1 简介 在目标检测领域中&#xff0c;mAP&#xff08;mean Average Precision&#xff0c;平均精度均值&#xff09;是一个广泛使用的性能评估指标&#xff0c;用于衡量目标检测模型…
阅读更多...
技术赋能政务服务：VR导视与AI客服在政务大厅的创新应用

技术赋能政务服务：VR导视与AI客服在政务大厅的创新应用

在数字化转型的浪潮中&#xff0c;政务大厅作为服务民众的前沿阵地&#xff0c;其服务效率和质量直接影响着政府形象和民众满意度。然而&#xff0c;许多政务大厅仍面临着缺乏智能化导航系统的挑战&#xff0c;这不仅增加了群众的办事难度&#xff0c;也降低了服务效率。维小帮…
阅读更多...
HTML5使用＜pre＞标签：保留原始排版方式

HTML5使用＜pre＞标签：保留原始排版方式

在网页创作中&#xff0c;一般是通过各种标记对文字进行排版的。但是在实际应用中&#xff0c;往往需要一些特殊的排版效果&#xff0c;这样使用标记控制起来会比较麻烦。解决的方法就是保留文本格式的排版效果&#xff0c;如空格、制表符等。 如果要保留原始的文本排版效果&a…
阅读更多...
跟《经济学人》学英文：2024年07月06日这期：Finishing schools for the age of TikTok

跟《经济学人》学英文：2024年07月06日这期：Finishing schools for the age of TikTok

Finishing schools for the age of TikTok Unsure how to be polite at work? Ask a digital etiquette guru 不确定如何在工作中保持礼貌&#xff1f;请教一位数字礼仪大师 “Finishing schools” 是指专门为年轻女性提供礼仪、社交技巧、文化修养等教育的学校&#xff0c;…
阅读更多...
智慧文旅（景区）解决方案PPT(42页)

智慧文旅（景区）解决方案PPT(42页)

智慧文旅解决方案摘要 行业分析中国旅游业正经历消费大众化、需求品质化、发展全域化和产业现代化的发展趋势。《“十三五”旅游业发展规划》的发布&#xff0c;以及文化和旅游部的设立&#xff0c;标志着旅游业的信息化和智能化建设成为国家战略。2018年推出的旅游行业安全防范…
阅读更多...
【Python实战因果推断】23_倾向分3

【Python实战因果推断】23_倾向分3

目录 Propensity Score Matching Inverse Propensity Weighting Propensity Score Matching 另一种控制倾向得分的常用方法是匹配估计法。这种方法搜索具有相似可观测特征的单位对&#xff0c;并比较接受干预与未接受干预的单位的结果。如果您有数据科学背景&#xff0c;您可…
阅读更多...
linux下的网络编程

linux下的网络编程

网络编程 1. 网络基础编程知识1.1网络字节序问题1.2 常用socket编程接口1.2.1 sockaddr1.2.2 ip地址转换函数1.2.4 socket()1.2.3 bind()1.2.4 listen()1.2.5 accept()1.2.6 connect() 1.3 以udp为基础的客户端连接服务器的demo1.4 以udp为基础的的服务器聊天室功能demo1.5 基于…
阅读更多...
网安小贴士（6）TCP/IP分层

网安小贴士（6）TCP/IP分层

一、前言 1983年&#xff0c;美国国防部决定将TCP/IP作为所有计算机网络的标准协议&#xff0c;这标志着TCP/IP正式成为互联网的基础协议。随着个人计算机的普及和网络技术的发展&#xff0c;TCP/IP模型被广泛应用于各种网络环境中&#xff0c;包括局域网&#xff08;LAN&#…
阅读更多...
Linux-DNS

Linux-DNS

DNS域名解析服务 1.DNS介绍 DNS 是域名系统 (Domain Name System) 的缩写&#xff0c;是因特网的一项核心服务&#xff0c;它作为可以将域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使人更方便的访问互联网&#xff0c;而不用去记住能够被机器直接读取的IP数串。…
阅读更多...
优化路由，优化请求url

优化路由，优化请求url

1、使用父子关系调整下使其更加整洁 2、比如说我修改了下url,那所有的页面都要更改 优化&#xff1a;把这个url抽出来&#xff0c;新建一个Api文件夹用于存放所有接口的url&#xff0c;在业务里只需要关注业务就可以 使用时 导包 发请求 如果想要更改路径&#xff0c;在这里…
阅读更多...
ctfshow web sql注入 web242--web249

ctfshow web sql注入 web242--web249

web242 into outfile 的使用 SELECT ... INTO OUTFILE file_name[CHARACTER SET charset_name][export_options]export_options:[{FIELDS | COLUMNS}[TERMINATED BY string]//分隔符[[OPTIONALLY] ENCLOSED BY char][ESCAPED BY char]][LINES[STARTING BY string][TERMINATED…
阅读更多...
View-＞裁剪框View的绘制，手势处理

View-＞裁剪框View的绘制，手势处理

XML文件 <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android…
阅读更多...
Linux系统的基础知识和常用命令

Linux系统的基础知识和常用命令

1、什么是Linux&#xff1f; 是一种免费使用和自由传播的类UNIX操作系统&#xff0c;其内核由林纳斯本纳第克特托瓦兹于1991年10月5日首次发布&#xff0c;它主要受到Minix和Unix思想的启发&#xff0c;是一个基于POSIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行…
阅读更多...
Flink实现准确和高效流处理的关键问题

Flink实现准确和高效流处理的关键问题

时间相关: Watermark 水位线 水位线是插入到数据流中的一个标记，可以认为是一个特殊的数据。水位线主要的内容是一个时间戳，用来表示当前事件时间的进展。水位线是基于数据的时间戳生成的。水位线的时间戳必须单调递增，以确保任务的事件时间时钟一直向前推进，进展。水位线…
阅读更多...
Git 运用小知识

Git 运用小知识

1.Git添加未完善代码的解决方法 1.1 Git只是提交未推送 把未完善的代码提交到本地仓库 只需点击撤销提交&#xff0c;提交的未完善代码会被撤回 代码显示未提交状态 1.2 Git提交并推送 把未完善的代码提交并推送到远程仓库 点击【未完善提交并推送】的结点选择还原提交&#x…
阅读更多...
【后端面试题】【中间件】【NoSQL】MongoDB查询优化2（优化排序、mongos优化）

【后端面试题】【中间件】【NoSQL】MongoDB查询优化2（优化排序、mongos优化）

优化排序 在MongoDB里面&#xff0c;如果能够利用索引来排序的话&#xff0c;直接按照索引顺序加载数据就可以了。如果不能利用索引来排序的话&#xff0c;就必须在加载了数据之后&#xff0c;再次进行排序&#xff0c;也就是进行内存排序。 可想而知&#xff0c;如果内存排序…
阅读更多...
【Oracle】Oracle常用函数

【Oracle】Oracle常用函数

目录 聚合函数数字函数1. ABS函数&#xff1a;返回一个数的绝对值。2. CEIL函数&#xff1a;返回大于等于给定数的最小整数。3. FLOOR函数&#xff1a;返回小于等于给定数的最大整数。4. ROUND函数&#xff1a;将一个数四舍五入到指定的小数位。5. MOD函数&#xff1a;返回两个…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023