Ajax調用接口并顯示返回參數(shù)前端需要調用接口并返回結果時，可以使用Ajax來實現(xiàn) 。菜雞程序員對其中的原理不是很了解，但是看網上很多教程很麻煩，這里貼一個我成功實現(xiàn)的一個case 。
- 使用id來定位需要修改的部分
- 點擊按鈕時觸發(fā)loadDoc()函數(shù)
- 使用console.log(‘error’)可以在控制臺打出想看的東西
- xhttp.open(“POST”, “http://localhost:5000/users/xxxxx/me”, true);使用POST向接口發(fā)送請求，true表示異步請求
- xhttp.setRequestHeader(‘content-type’, ‘application/json’);設置請求的header
- xhttp.send(JSON.stringify(sendData));將變量json格式化后傳輸
- xhttp.onreadystatechange = function()在這里執(zhí)行想要進行的html變換的操作，JSON.parse(xhttp.responseText)
<!DOCTYPE html><html><body><h1>XMLHttpRequest target</h1><button type="button" onclick="loadDoc()">Request Data</button><p>suggestion: <span id="demo"> </span></p><script>function loadDoc() { console.log('error'); var xhttp = new XMLHttpRequest(); xhttp.open("POST", "http://localhost:5000/users/xxxxx/me", true); xhttp.setRequestHeader('content-type', 'application/json'); var sendData = https://www.jinnalai.com/fenxiang/{"abc":123}; //將用戶輸入值序列化成字符串 xhttp.send(JSON.stringify(sendData)); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4) { var jsonObj = JSON.parse(xhttp.responseText); document.getElementById("demo").innerHTML = jsonObj.data.adjustPeriod console.log(jsonObj.data.adjustPeriod); }}}</script></body></html>Ajax跨域問題解決python中，在flask創(chuàng)建app實例時，添加如下代碼即可：【ajax調用后端接口實例 ajax調用接口步驟】
from flask_cors import CORS# 創(chuàng)建app實例對象 app = Flask(__name__) CORS(app)
推薦閱讀
- jquery的ajax用法 jquery插件怎么寫教程
- jq請求ajax的方法 ajax發(fā)送數(shù)據格式
- ajax請求的五個步驟 同步ajax請求
- 戰(zhàn)地2042找不到后端服務器怎么辦 戰(zhàn)地6找不到后端服務解決
- 戰(zhàn)錘末世鼠疫2后端錯誤怎么辦 末世鼠疫2后端錯誤解決辦法
- 汽車空調是用油還是用電，車輛空調用電還是油
- 歐姆龍觸摸屏多狀態(tài)怎么調用 要學會調用觸摸屏多狀態(tài)
- 后端需要學javaweb嗎 不學javaweb可以做后端開發(fā)嗎
- 拓普康102全站儀怎么保存測點和調用點坐標 幾步教你快速解決
- 電腦顯示遠程過程調用失敗且未執(zhí)行 解決方法