之前我们学习了一些有关jq函数的知识,现在我们看看jq与ajax方面的一些东西:
1.ajax(Asynchronous JavaScript and XML 异步的JavaScript与xml):
在不重载整个网页的情况下,ajax通过发送请求获取后台数据,显示在页面上。注意ajax并不是一种新的编程语言,而是使用现有标准的新方法。
2.jq与ajax:
jq提供多个与ajax有关的方法。通过jQuery AJAX方法,您能够使用HTTP Get和HTTP Post从远程服务器上
请求文本、HTML、XML或JSON,可以把这些外部数据直接载入网页的被选元素中。
如果没有jq,ajax编程并不容易。因为不同的浏览器,ajax的实现方式不一样,这通常意味着我们需要编写
额外的代码对浏览器进行测试。jq已经解决了这个问题,我们只需要一行代码即可进行ajax请求
3.load()方法:
$(selector).load(URL,data,callback);简单而强大的ajax方法,从服务器加载数据,并把返回的数据放入被选元素中
URL: 必选,请求URL
data: 可选,请求参数对象
callback: 可选,回调函数
//把文件"demo_test.txt"的内容加载到指定的<div>元素中
$("#div1").load("demo.txt");
//把文件"demo_test.txt"中id="p1"的元素的内容,加载到指定的<div>元素中
$("#div1").load("demo.txt #p1");
可选的callback回调函数可以设置三个参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
$("button").click(function(){
$("#div1").load("demo.txt",function(responseTxt,statusTXT,xhr){
if("success"==statusTXT){
alert("内容加载成功");
}else if("error"==statusTXT){
alert("Error: "+xhr.status+": "+xhr.statusText);
}
});
});
4.GET与POST:
$.get(URL,callback):
$.post(URL,data,callback):
//$.get()方法从服务器上的一个文件中取回数据
$("button").click(function(){
$.get("demo.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
}
); //ASP文件("demo.asp")类似这样:
<%
response.write("This is some text from an external ASP file.")
%>
//使用$.post()连同请求一起发送数据
$("button").click(function(){
$.post("demo.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
}
);
}); //ASP文件("demo.asp")类似这样:
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
参考链接(get与post的区别):
https://www.cnblogs.com/logsharing/p/8448446.html
5.noConflict():
我们使用$作为jQuery的简写,当其他js框架也使用“$”作为简写时,如何才能避免冲突呢?使用noConflict()方法。noConflict()方法会释放$标识符的控制,这样其他脚本就可以使用它了。
//通过全名替代简写的方式来使用jQuery
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行!");
});
}); //noConflict()可返回对jQuery的引用,可以把它存入变量,以供稍后使用
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行!");
});
}); //把$符号作为变量传递给ready(),在函数内使用$符号,而在函数外,使用 "jQuery"
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍在运行!");
});
});