日期:2014-05-16 浏览次数:20681 次
back>>
1. 加载异步数据
??? - load()方法
??? load(url,[data],[callback]),url是页面地址,[data]是要发送到服务器的数据,格式为key/value,callback表示数据加载成功后的回调函数
??? $("#divTip").load("b.html"); //load()方法加载数据
??? load()方法中,参数url还可以用于过滤页面中的某类别的元素,如$("#divTip").load("b.html.divContent");表示获取b.html中类别名为divContent的全部元素
??? - getJSON()全局函数
获取json文件
??? $.getJSON(url, [data],[callback])
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件,并通过回调函数处理获取的数据 $.getJSON("UserInfo.json", function(data) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $.each(data, function(InfoIndex, Info) { //遍历获取的数据 strHTML += "姓名:" + Info["name"] + "<br>"; strHTML += "性别:" + Info["sex"] + "<br>"; strHTML += "邮箱:" + Info["email"] + "<hr>"; }) $("#divTip").html(strHTML); //显示处理后的数据 }) }) })
??? getScript()全局函数获取.js文件
??? $.getScript(url,[callback])
??? 页面获取js文件内容的方法有:
<script type=”text/javascript” src=”js/xx.js”></script> $(“<script type=’text/javascript’ src=’js/xx.js’ />”).appendTo(“head”); $.getScript("UserInfo.js");
?
???
- 异步加载XML文档
???
$.get(url,[data],[callback],[type]),url表示等待加载的数据地址,[data]表示发送到服务器的参数,其格式是key/value,[type]表示返回数据的格式:html,xml,js,json,text等。
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件,并通过回调函数处理获取的数据 $.get("UserInfo.xml", function(data) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $(data).find("User").each(function() { //遍历获取的数据 var $strUser = $(this); strHTML += "姓名:" + $strUser.find("name").text() + "<br>"; strHTML += "性别:" + $strUser.find("sex").text() + "<br>"; strHTML += "邮箱:" + $strUser.find("email").text() + "<hr>"; }) $("#divTip").html(strHTML); //显示处理后的数据 }) }) })
??? 通过each()方法便利文档中的User节点,然后再遍历的过程中使用find方法,查询该节点中的name,sex,email选项,并通过text()方法获取各选项的值。
2. 请求服务器数据
???
- $.get()方法
??? 例子:
$.get("user.do", { name: encodeURI($("#txtName").val()) }, function(data) { $("#divTip") .empty() //先清空标记中的内容 .html(data); //显示服务器返回的数据 })
??? 参数中有中文,需要使用encodeURI()进行转码,服务端接收时,需要用decodeURI进行解码。
?
??? - $.post()请求数据
??? $.post(url,[data],[callback],[type])和$.get()方法请求方式一样,只是get方式不是后传递数据量较大的数据,同时,请求的历史信息会保存在浏览器的缓存中,有一定的风险。而post方式没有这种缺点。
??? - serialize()序列化表单
??? 向服务器传递表单的数据时,逐个输入字段的方式进行传输比较麻烦,serialize方法可以简化参数船只的方式。
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件,并通过回调函数返回服务器响应后的数据 $.post("user.do", $("#userForm").serialize(), //序列化表单数据 function(data) { $("#divTip") .empty() //先清空标记中的内容 .html(data); //显示服务器返回的数据 }) }) })
???? Serialize()方法很完美地模拟浏览器提交表单的操作,同时解决了中文编码问题,但它也有很多不足,比