ajax在jQuery中的应用

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()方法很完美地模拟浏览器提交表单的操作,同时解决了中文编码问题,但它也有很多不足,比如表单中有多项被选中时,该方法只能传递一项的值。

 

3. $.ajax方法

    $.ajax()是jQuery最底层的方法,因为,凡使用$.getScript(),$.get(),$.post(),$.getJSON()的调用,都可以用$.ajax()代替。
    $.ajaxSetup()设置全局Ajax
    在使用$.ajax()方法时,有时需要调用多个$.ajax(),如果每个方法都设置其中的请求细节,显得繁琐。使用$.ajaxSetup()方法设置全局性的Ajax默认选项,一次设置,全局有效。
例子:

$(function() {
            $.ajaxSetup({ //设置全局性的Ajax选项
                type: "GET",
                url: "UserInfo.xml",
                dataType: "xml"
            })
            $("#Button1").click(function() { //"姓名”按钮的单击事件
                $.ajax({
                    success: function(data) { //传回请求响应的数据
                        ShowData(data, "姓名", "name"); //显示"姓名"部分
                    }
                })
            })
            $("#Button2").click(function() { //"性别”按钮的单击事件
                $.ajax({
                    success: function(data) { //传回请求响应的数据
                        ShowData(data, "性别", "sex"); //显示"性别"部分
                    }
                })
            })

            $("#Button3").click(function() { //"邮箱”按钮的单击事件
                $.ajax({
                    success: function(data) { //传回请求响应的数据
                        ShowData(data, "邮箱", "email"); //显示"邮箱"部分
                    }
                })
            })
            /*
            *根据名称与值,获取请求响应数据中的某部分
            *@Param d为请求响应后的数据
            *@Param n为数据中文说明字符
            *@Param d为数据在响应数据中的元素名称
            */
            function ShowData(d, n, v) {
                $("#divTip").empty(); //先清空标记中的内容
                var strHTML = ""; //初始化保存内容变量
                $(d).find("User").each(function() { //遍历获取的数据
                    var $strUser = $(this);
                    strHTML += n + ":" + $strUser.find(v).text() + "<hr>";
                })
                $("#divTip").html(strHTML); //显示处理后的数据
            }
})
 


4. ajax全局事件
    $.ajaxSetup()是全局函数
    jQuery中有6个全局性Ajax事件
    ajaxComplete(callback) ajax请求执行完成时执行函数
    ajaxError(callback) ajax请求发生错误时执行函数,其中捕捉到的错位可以作为最后一个参数进行传递
    ajaxSend(callback) ajax请求发送前执行函数
    ajaxStart(callback) ajax请求开始时执行函数
    ajax请求开始是触发,常用语编写一些准备工作,如提示“正在获取数据…”
    ajaxStop(callback) ajax请求结束时执行函数
    ajax请求结束时触发,常与ajaxStart()结合,说明请求的最后进展状态,如将提示“正在获取数据。。。”修改为“已成功获取数据”,然后渐渐消失掉。

//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function() {
                $(this).show(); //显示元素
            })
            //元素绑定全局ajaxStop事件
            $("#divMsg").ajaxStop(function() {
                $(this).html("已成功获取数据。").hide();
})
<div id="divMsg" class="clsTip">正在发送数据请求…</div>

    ajaxSuccess(callback)ajax请求成功时执行函数

    在js文件中引用js文件:<reference path="jquery-1.4.2.js"/>

 

记忆碎片
未知死亡
地球上的星星

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值