AJAX load() 方法
- load() 方法从服务器加载数据,并把返回的数据放入被选元素中
语法:
$(selector).load(URL,data,callback);
语法解释:
- 必需的 URL 参数规定您希望加载的 URL。
- 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
- 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
使用示例:
$("button").click(function(){
$("#div1").load("demo.txt");
});
XML对象
XML :可作为ajax交互数据的数据类型,当然也不仅局限于xml,像我们所知的json,jsonp,html,script,text都可以作为数据类型。
XML属性和方法
属性 | 描述 |
---|---|
readyState | HTTP 请求的状态 |
responseText | 响应体(不包括头部) |
responseXML | 对请求的响应,解析为 XML 并作为 Document 对象返回。 |
status | 由服务器返回的 HTTP 状态代码,如 200 表示成功 |
statusText | 这个属性用名称而不是数字指定了请求的HTTP的状态代码。也就是说,当状态为200的时候它是"OK",当状态为404的时候它是 “Not Found” |
方法:
方法 | 描述 |
---|---|
abort() | 取消当前响应,关闭连接并且结束任何未决的网络活动。 |
getAllResponseHeaders() | 把 HTTP 响应头部作为未解析的字符串返回。 |
getResponseHeader() | 返回指定的 HTTP 响应头部的值。 |
open() | 初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。 |
send() | 发送 HTTP 请求,使用传递给open()方法的参数,以及传递给该方法的可选请求体。 |
应用示例:
$(function(){
$("button").click(function(){
$("#div1").load("demo.txt",function(responseText,statusText,xhr) {
if(statusText=="success"){
alert("外部文件加载成功!")
}
else(statusText=="error")
alert("Error:"+xhr.status+":"+xhr.statusText);
});
});
});
AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET和POST的区别:
相同点:
Get和Post都是用来获取和提交数据的一种方法,两者都可以实现与服务器的通信
不同点
GET | POST | |
---|---|---|
缓存 | GET 方法可能返回缓存数据 | POST 方法不会缓存数据,并且常用于连同请求一起发送数据 |
历史 | 参数保留在浏览器历史中 | 参数不会保存在浏览器历史中 |
安全性 | 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分 | POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中 |
可见性 | 数据在 URL 中对所有人都是可见的 | 数据不会显示在 URL 中 |
$.get() 方法
语法:
$.get(URL,callback);
使用示例:
$.get("demo.text",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
$.post() 方法
语法
$.post(URL,data,callback);
使用示例
$("button").click(function(){
$.post("test.php",{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
noConflict() 方法:
noConflict() 方法是为了避免与其他javascript框架也使用$符号作为简写,导致两种不同的框架同时在使用相同的符号,有可能会使脚本停止运行;所以在使用多种框架且符号相同时,需要用到 noConflict() 方法,noConflict() 方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了。
语法:
$.noConflict();
//通过全面来代替简写
jQuery(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
)};
//自己创建简写.noConflict()可返回对jQuery的引用,可以存到变量来使用
var jq=$.noConflict();
jq(function($) {
jq("button").click(function() {
jq("p").text("我正在码代码");
});
});
//不改变快捷方式,把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function() {
$("p").text("我正在码代码");
})
})
ajax() 方法
AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分。
语法:
$.ajax({name:value, name:value, ... })
获取外部数据,利用表格展示出来
$.ajax({
type:'GET', //请求方式
data:{},//指定发送过去的数据类型
url :'获取数据的存放地址',
//解决跨域问题
dataType: 'jsonp', // 请求方式为jsonp,jsonp进行跨域请求 只支持get
jsonpCallback: 'jQuery17204270111460038739_1585805432011', // 回调函数名--存放数据的名称
//success:当请求成功时运行的函数
success:function(msg){
for(i in msg.data) {
var tr;
tr='<td>'+msg.data[i].rownum_+'</td>'+'<td>'+msg.data[i].deptname
+'</td>'+'<td>'+msg.data[i].deptid+'</td>'+'<td>'+msg.data[i].provdrugvisits
+'</td>'+'<td>'+msg.data[i].visits+'</td>'+'</td>'+'<td>'+msg.data[i].ratio+'</td>';
$("#tabletest").append('<tr>'+tr+'</tr>');
}
}
});
生成Ajax异步请求示例
$("button").click(function() {
$.ajax({
url:"demo.txt",
async:true,//异步请求
success:function(result) {
$("div").html(result);
}
});
});
生成带有指定参数的Ajax请求示例:
$("button").click(function() {
$.ajax({
url:"js/demo.js",
//预期的服务器响应的数据类型为script
dataType:"script"
});
});
js代码
window.alert("该 JavaScript 脚本通过 AJAX 加载后执行");
getScript() 方法
getScript() 方法使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。
语法:
$(selector).getScript(url,success(response,status));
$("button").click(function() {
$.getScript("js/demo.js");
});
})
param() 方法
param() 方法创建数组或对象的序列化表示形式。
语法
$.param(object,trad)
使用示例
$(function() {
personObj=new Object();
personObj.firsrName="John";
personObj.lastName="Doe";
personObj.age=50;
personObj.eyeColor="blue";
$("button").click(function() {
//param() 方法创建数组或对象的序列化表示形式。
$("div").text($.param(personObj));
})
})
ajaxSuccess() 方法
ajaxSuccess() 方法规定 AJAX 请求成功完成时运行的函数。
语法:
$(document).ajaxSuccess(function(event,xhr,options))
使用示例
//当 AJAX 请求成功完成时,触发一个提示框:
$(function() {
$(document).ajaxSuccess(function() {
alert("Ajax请求成功!!")
})
$("button").click(function() {
$("div").load("demo.txt")
})
})
提示:有时候在Chrome是请求不成功的,会出现跨域问题,只要在Chrome快捷方式属性的目标中加入"–allow-file-access-from-files"即可运行成功,如果还是不成功就用edge打开。