<!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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。