axios、ajax和xhr前端发送测试
生活随笔
收集整理的這篇文章主要介紹了
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前端发送测试的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 做计算机二级的技巧,2016全国计算机二
- 下一篇： 【HTML学习】——一个网页HTML编程