jq04--jq与ajax
之前我们学习了一些有关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 仍在运行!"); }); });