<!DOCTYPE html>
<html lang="Zh-cn">
<head>
<meta charset="UTF-8">
<title>网络请求Dome</title>
</head>
<body>
<h1>员工查询</h1>
<label>请输入员工编号:</label>
<input type="text" id="keywords">
<button id="search">查询</button>
<p id="searchResult"></p>
<h1>员工新建</h1>
<label>请输入员工姓名:</label>
<input type="text" id="name"><br>
<label>请输入员工编号:</label>
<input type="text" id="number"><br>
<label>请输入员工性别:</label>
<select id="sex">
<option value="man">男</option>
<option value="woman">女</option>
</select><br>
<label>请输入员工职位:</label>
<input type="text" id="position"><br>
<button id="save">保存</button><br>
<p id="saveResult"></p>
<script scr="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
//jQuery中 Ajax普通请求
$(document).ready(function() {
$("#search").click(function() {
$.ajax({
url: 'url',
type: 'default GET (Other values: POST)',
dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
data: {param1: 'value1'},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
j
});
});
//javascript中 Ajax普通请求
document.getElementById("search").onclick= function() {
//新建一个请求
var request = new XMLHttpRequest();
//设置请求请求方式,参数,
request.option("GET","url?number="+document.getElementById("keywords").value);
//发送请求
request.send();
//获取响应结果
request.onreadystatechange = function() {
if (request.readyState ===4) {
if (request.status ===200) {
var data = JSON.parse(request.responseText);
if (data.success) {
//请求成功,刷新页面
document.getElementById("saveResult").innerHTML=data.msg;
} else {
document.getElementById("saveResult").innerHTML="发生错误:"+data.msg;
}
} else {
alert("发生错误:"+request.status);
}
}
}
}
document.getElementById("save").onclick= function() {
//新建一个Ajax请求
var request = new XMLHttpRequest();
//设置请求请求方式,参数,
request.option("POST","url");
//构造请求参数
var data = "name="+document.getElementById("name").value
+"number="+document.getElementById("number").value
+"sex="+document.getElementById("sex").value
+"position="+document.getElementById("position").value;
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
request.send(data);
//获取响应结果
request.onreadystatechange = function() {
if (request.readyState ===4) {
if (request.status ===200) {
var data = JSON.parse(request.responseText);
if (data.success) {
//请求成功,刷新页面
document.getElementById("searchResult").innerHTML=data.msg;
} else {
document.getElementById("searchResult").innerHTML="发生错误:"+data.msg;
}
} else {
alert("发生错误:"+request.status);
}
}
}
}
</script>
</body>
</html>
Ajax网络请求基本用法
最新推荐文章于 2024-08-15 14:48:45 发布