一 进行ajax步骤:
1 获取dom值
2发送ajax请求
3返回成功进行前端逻辑处理
二 原生javascript的ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<button onclick="ajax()">发送请求</button>
</body>
<script type="text/javascript">
function ajax(options) {
var options={
url: "https://m.lechebang.cn/gateway/shop/getServiceNetList", //请求地址
type: "POST", //请求方式
data:{"cityId":10201,"token":"9d48188d9e3b6ca95788ba2dabf78351","appCode":101}, //请求参数
dataType: "json"
}
var params =JSON.stringify(options.data);
//创建 - 非IE6 - 第一步
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else { //IE6及其以下版本浏览器
var xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
//连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
console.log("调取ajax成功,开始进行前端逻辑处理数据");
} else {
options.fail && options.fail(status);
console.log("调取ajax失败");
}
}
}
}
</script>
</html>
三 jquery的ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button onclick="ajax()">发送请求</button>
</body>
<script type="text/javascript">
function ajax(options) {
var parameter=JSON.stringify({"cityId":10201,"token":"9d48188d9e3b6ca95788ba2dabf78351","appCode":101});
$.ajax({
type:"post",
url:"https://m.lechebang.cn/gateway/shop/getServiceNetList",
async:true,
data:parameter, //请求参数
dataType: "json",
success:function(result){
console.log(result);
},
});
}
</script>
</html>
时间： 2024-08-27 06:01:49