jQuery.ajax(url,options)
1、url指定请求的路径，比如http://localhost:8080/jQuery/ajax/json
- 相对路径，永远相对于当前文件
- 绝对路径，在web环境下指定的都是当前的http://主机：端口/开始算起
在jsp页面中，动态获取当前web应用的路径
jsp表达式 request.getContextPath()
EL表达式 $（pageContext.request.contextPath）
在velocity模板中，动态获取当前web应用的路径
$(request.contextPath)
2、option参数指的是一个JavaScript对象(键值对)
- type属性用来指定请求方式，可以是post或get
- data属性用来指定向服务器发送的数据，可以是字符串或键值对集合
字符串：username=ff&age=1
键值对集合：{"username":"ff","age":"1"}
- success属性用来指定当请求成功后，怎么处理响应数据，需要指定一个带有参数的函数
"success":fuction(responseData){
}
- dataType属性用来指定期望服务器返回的数据的类型，可以是
xml 返回xml文档
html 返回html文档
json 返回标准json格式的文本（jQuery会自动将字符串解析为js对象，如果没有自动完成转换，则可以通过jQuery.parseJson（string））
script 返回JavaScript代码
4、其他方法
- jQuery.get() 相当于指定了请求方式为get
- jQuery.post()相当于指定了请求方式为post
- jQuery.getJson()相当于指定了请求方式为get并期望返回是json
- jQuery.getScipt()相当于指定了请求方式为get并期望返回是script
3、测试案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery ajax</title> <script src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { var type ="click"; var action = function () { var url = "/jQuery/ajax/json"; var options = { type:"post", data:"name=xx&password=123", dataType:"json", success:function (resposeData) { console.log(resposeData); $("#show").html(resposeData.result+","+responseData.message);//document.querySelector("#show").innerHtml=resposeData } } $.ajax(url,options); } $("#jsonbtn").bind(type,action); $("scriptbtn").bind("click",function () { var url = "/jQuery/ajax/script"; var options = { type:"post", dataType:"script", success:function (s) { console.log(s); } } $.ajax(url,options); }); $("getscriptbtn").bind("click",function () { var url = "/jQuery/ajax/script"; var options = { success:function (s) { console.log(s); } } $.getScript(url,options); }); }); </script> </head> <body> <button type="button" id="jsonbtn">发送请求并期望发返回json</button> <button type="button" id="scriptbtn">发送请求并期望发返回script</button> <button type="button" id="getscriptbtn">发送get请求并期望发返回script</button> <div id="show" style="border: 1px solid #dedede"></div> </body> </html>
load()
1、load()是一个实例函数，必须获得一个jQuery实例后才能使用
2、测试案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery load</title> <script src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { var action = function(){ $(".show").load("$(pageContext.request.contextPath)/ajax/normal"); } setTimeout(action,3000); }); </script> </head> <body> <h1>对待3秒钟就会出现</h1> <div class="show" style="border: 1px solid #dadadc;box-shadow: 0 0 5px 4px; 90%;"></div> </body> </html>
转载请于明显处标明出处