<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>測試</title>
<script src="../../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
用戶名：<input type="text" id="userName" /><br>
密碼：<input type="text" id="passWord" /><br />
<button id="btn1">登錄</button>
</div>
<div id="div1" style="background-color: #BBFFAA;">
</div>
</body>
<script>
// 實現功能：將登錄的請求發往后端(登錄)
// 1.獲得數據(用戶名、密碼)
// 2.一個的Ajax模板
// Ajax將請求發送給服務器端，異步刷新
// 3.將獲得的響應結果進行回顯。
$(function() {
// 調用方法
$("#btn1").click(function() {
login();
})
})
// 定義方法：登錄方法
function login() {
var htmlData;
// var ajaxUrl = "http://61.166.56.165:8050/waterregime/";
// document.getElementById("div1").innerHTML = "1111";
$("#div1").html("時間你好");
// alert($("#div1").html);
let userName = $("#userName").val(); // JQuery方式
let passWord = document.getElementById("passWord").value; // JS方式
let param = {
"userName": userName,
"passWord": passWord
}
$.ajax({
// url: ajaxUrl + '/systemdata/getsystemdatalist',
url: "http://www.baidu.com", // 請求Url
type: "POST", // 請求方式：GET/POST
data: param, // 請求參數
success: function(response) { // 請求成功之后的回調函數
// 回顯
// {//回顯對象
// "code": 0,
// "data": data,
// "message": "操作成功"
// }
$("#div1").html(response);
$("#div1").html(response.data);//獲取對象中某一屬性的值
},
error: function(error) { // 請求失敗的回調函數
alert(error);
}
})
}
</script>
</html>
Ajax發送請求獲取數據過程
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。