<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Insert title here</title>
</head>
<body>
<h1>The Jquery ajax</h1>
<fieldset>
<legend>jquery</legend>
<button onclick="doGet()">$get(...)</button>
<form>
输出:<input type="text" name="name"> <input type="button"
onclick="doPost()" value="提交 ">
</form>
<span id="resultId"></span>
</fieldset>
<!-- 引入jquery包 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
1.这个是get提交函数；
function doGet() {
//申请url
var url = "/jquery/doAjaxGet";
//申请参数
var params = "msg=hello jquery ahax get method";//将代码转为大写的字母
//发送异步申请
$.get(url, params, function(result) {
//document.querySelector("#resultId").innerHTML =result;
$("#resultId").html(result);//
})
}
2.post提交函数
function doPost() {
//申请url
var url = "/jquery/doAjaxPost";
//申请参数
var name = document.forms[0].name.value;//获取name的值；
var params = "name=" + name;//将代码转为大写的字母
//发送异步申请
$.post(url, params, function(result) {
//document.querySelector("#resultId").innerHTML =result;
$("#resultId").html(result);//
})
}
3.这个是ajax提交函数
function doAjax() {
//1.定义申请的url
var url = "doAjaxGet";
//2.定义申请的参数
var params = "msg=hello jquery ajax request";
//3.发送异步Get申请
//这里的$符号为jQuery中的一个对象
$.ajax({
//右边的货色是零碎定义的不能轻易乱改 ；
type : "GET",//能够省略默认为get申请
url : url,
data : params,//无需向服务端传参时能够不写
async : true,//能够补写（由ajax函数neibu基于返回值进行匹配解决）
success : function(result) { //解决服务端返回的失常信息
$("#result").html(result);
},
error : function(xhr) {//解决服务端返回的异样信息
console.log(xhr.statusText);
$("#result").html(xhr.statusText);
}
})
}
4.这个是load提交函数
function doLoad() {
//1.定义申请的url
var url = "doAjaxGet";
//2.定义申请的参数
var params = "msg=hello jquery ajax request";
//3.发送异步Get申请
//通过load函数向服务端发送异步申请，将服务端响应的后果异步更新到
//resultId对应的地位
$("#result").load(url);//
}
</script>
</body>
</html>
发表回复