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