axios、ajax和xhr前端发送测试

其实axios和ajax都对原生的xhr进行了封装，个人感觉还是axios简洁、方便，尤大大都让我们转axios了，确实对于ajax好了不少，它支持了promise对象，支持js最新的规范。简单易用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script> --><!-- vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 推荐使用：axios HTTP Client 网络通信的函数库 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"crossorigin="anonymous"><title>Document</title>
</head><body><div id="app"><table class="table"><thead><tr><th>学生姓名</th><th>学生电话</th><th>学生班级</th><th>操作</th></tr></thead><tbody><tr v-for="(v, index) in stu" :key="index"><td scope="row">{{v.vname}}</td><td>{{v.vphone}}</td><td>{{v.vclazz.mtitle}}</td><td><button type="button" @click="ajaxdelete(v.vid)" class="btn btn-danger">删除</button></td></tr></tbody></table></div>
</body><script>new Vue({el: '#app',data: {stu: []},mounted() {axios.get("/allstu").then((r) => {console.log("data:", r.data)this.stu = r.data;});//    $.ajax({//        url:"/test",//        type:'post',//        contentType:"application/json; charset=utf-8",//        data:JSON.stringify(1),//        success:function(r){//            console.log("测试实数",r);//            console.log("ok");//        }//    });this.xhrtest();},methods: {ajaxdelete:function(id){console.log("id",id);$.ajax({url:"/delete",type:"POST",contentType: "application/json; charset=utf-8",data:JSON.stringify(id),succcess:()=>{alert("成功提交!")}})},xhrtest:function(){// 创建xhr对象
                let xhr ;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject('Microsoft.XMLHTTP');}//发送请求//如果修改第三个参数为true，你会发现，之后的xhr成功返回数据，但是status不会执行if语句，也就是说，你看不到“这个成功了”的输出//如果改为false，google浏览器会提示你这个同步的xmlHttpRequest已经过时了，因为它影响了用户体验// Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.xhr.open("POST","/test",true);xhr.setRequestHeader('Content-Type', ' application/json');//发送请求数据xhr.send(JSON.stringify(1));// if((xhr.status >= 200 && xhr.status< 300)|| xhr.status == 304){//     alert(xhr.responseText);//     console.log("这个成功了了！")// }else{//     alert('request was unsuccessful:'+xhr.status);//     console.log("状态码：",xhr.status);//     console.log("xhr测试失败！");// }// 返回的响应有：// responseText:作为响应主体被返回的文本// responseXML:XML文档// status , statusText:状态码说明//如果为true，表示异步通信,应该改为如下方式xhr.onreadystatechange  =function(){if(xhr.readyState == 4){if((xhr.status >= 200&& xhr.status<300)||xhr.status ==304){alert(xhr.responseText);console.log("ok");}else{alert("Request was unsuccessful:"+xhr.status);}}}}}});
</script></html>

转载于:https://www.cnblogs.com/linchongatfirst/p/9551029.html

axios、ajax和xhr前端发送测试相关推荐

AJAX和XHR和Axios和Fetch
AJAX和XHR和Axios和Fetch 部分测试代码在gitee上地址:https://gitee.com/gaohan888/node-js-learning/tree/master/ajax ...
【Ajax技术】使用XHR对象发送和接受数据
紧接着上一篇,我们获取XMLHttpRequest之后,就要使用XHR对象发送和接受数据了,继续完善我们的javascript脚本文件: verifyown.js: //用户名校验的方法 //这个方法 ...
xhr如何发送post请求_xhr 或 jQuery ajax， Post 请求如何获得 303 状态的返回结果
问题网站 http://www.xingk.cc/forum.php... 需注册,比较麻烦,下面给一个临时账号账号:爱玩屎的阿拉蕾密码:Av123456! 问题描述论坛的网盘地址被加了跳转链, ...
Python Day 67 Dango框架图解（总结）、Wsgiref和uwsgi、前后端传输数据的编码格式、From表单和Ajax方式在前端往后端发送文件、补充一下页面清缓存...
##Django框架图解 ##前后端传输数据的编码格式 #前后端传输数据的编码格式1.urlencoded 2.formdata 3.application/json ##From表单和Ajax方式在 ...
jQuery Ajax 和 axios Ajax
一.区别: axios是通过promise技术实现对ajax实现的一种封装,本身上来说axios就是ajax,但是ajax却不单单只是axios:jQuery也实现了对ajax技术的封装,但是jQue ...
前端发送http的get请求 - 代码篇
前端html发送http GET请求(含案例 .含代码) 资料文献地址: 资料文献 . jQuery.get().jQuery.post() 分类:快捷方法案例 · 代码: <!DOCTYPE ...
Ajax--概述、xhr对象的常用属性和方法、xhr的常用事件、xhr对象发送POST请求、xhr对象发送GET请求、xhr对象的兼容性问题、数据交换格式(XML、JSON)
一.概述 1.1 发展历程在开始之前先来看一下Ajax的工作原理吧,如下图所示: Ajax全称Asynchronous javascript and xml(异步 JavaScript 和 XML) ...
ajax 与 xhr
文章目录 ajax xhr发起请求 xhr请求如何携带信息 ajax ajax: A:异步 :J: javascript :A :and :X :XML: 前后端交互:❶ 前端发送请求❷ 后端接收请求 ...
php 接受数组_PHP接收前端发送的数组
//前端发送数据 var unPaid=JSON.stringify([{ "AMN_D" : "300. 0", "AMN_T1" : & ...

axios、ajax和xhr前端发送测试

axios、ajax和xhr前端发送测试相关推荐

最新文章

热门文章