Ajax发送请求获取数据过程

时间：2024-02-15 16:49:23

<!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>

相关文章