`

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"/>

 

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

 

分享到:
评论

相关推荐

    Ajax+JQuery应用Demo

    工作之余写的一些Ajax应用,有6个Demo,数据库为mysql,使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。

    Jquery的Ajax应用

    Ajax在jQuery中的应用让开发者能够实现无刷新的数据交换,提升了用户体验,减少了页面加载时间,同时也使得Web应用程序更加动态和响应式。 **1. jQuery的Ajax核心函数** 在jQuery中,有几种主要的Ajax函数可供选择...

    利用Ajax+Jquery实现异步进度条效果

    在现代Web应用中,用户体验是至关重要的,而异步加载和实时反馈机制是提升用户体验的有效方式之一。"利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开,它涉及到C#后端开发、.NET框架、Ajax技术以及...

    PHP+Ajax+jQuery网站开发项目式教程:电子商务网站项目作业

    通过这个项目式教程,你不仅可以掌握基础的PHP编程,还可以了解到如何使用Ajax和jQuery提升用户体验,以及如何在实际项目中运用MVC框架。随着对这些技术的深入理解,你将具备构建更复杂电子商务网站的能力。

    基于MVC用JSPServlet实现JPetStore实验报告+使用AJAX和jQuery改善用户体验实验报告.doc

    在本实验报告中,我们将探讨如何使用MVC(Model-View-Controller)设计模式通过JSP和Servlet实现JPetStore应用程序,并进一步利用AJAX和jQuery技术优化用户体验。实验旨在加深对Web应用开发的理解,特别是Java相关...

    Ajax和Jquery基础入门视频(源码和课件)

    在实践中,你可以尝试创建一个简单的Ajax应用,如实时搜索建议、无刷新分页或动态加载内容。结合提供的源码和课件,逐步理解并掌握这些技术,最终能够自如地运用到自己的项目中,提升Web开发技能。 总之,Ajax和...

    ajax的jquery代码

    在这个“ajax的jquery代码”主题中,我们将深入探讨如何使用jQuery实现Ajax功能。 一、jQuery中的Ajax基础 1. `$.ajax()`: 这是jQuery中最基础的Ajax函数,它可以接受一个包含各种选项的对象作为参数,如URL、类型...

    ajax和Jquery的应用实例

    在这个"ajax和Jquery的应用实例"中,我们可以深入理解这两项技术的核心概念以及如何将它们应用到实际的网页开发中。 首先,Ajax是一种在无需刷新整个页面的情况下更新部分网页的技术。它通过JavaScript在后台与...

    php+ajax+jquery打造登陆验证

    在IT行业中,构建动态网页应用时,PHP、Ajax和jQuery是三个非常重要的技术。这篇教程“php+ajax+jquery打造登陆验证”旨在教你如何利用这些技术实现无刷新的登录验证,提升用户体验。以下是对这些技术及其在登录验证...

    struts2+ajax+jquery

    在这个"struts2+ajax+jquery"的主题中,我们将深入探讨如何利用Struts2、jQuery和Ajax技术实现Web页面的异步交互。 首先,Struts2作为MVC框架,它的核心是Action,它负责处理用户的请求,并通过配置的Result返回...

    Ajax里jQuery的ajax与ssh集成

    在IT行业中,Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下更新部分网页的技术,极大地提升了用户体验。jQuery是一个轻量级、功能丰富的JavaScript库,它简化了DOM操作、事件处理、动画...

    ajax_jquery 传智播客ajax课堂源码.rar

    【标题】"Ajax与jQuery在Web开发中的应用" 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术是一种实现页面无刷新更新数据的关键技术。它允许网页在不重新加载整个页面的情况下,与服务器交换数据并局部...

    Ajax和Jquery

    总结,Ajax和jQuery是前端开发中的重要工具,它们极大地提高了Web应用的性能和用户体验。jQuery通过其强大的库和丰富的插件,简化了JavaScript编程,而Ajax则使得页面能够在不刷新的情况下与服务器进行通信,提升了...

    ajax对jquery的支持

    在本案例中,“ajax对jquery的支持”是指使用jQuery库来实现一个实时股票更新的功能。 jQuery的AJAX功能通过`.ajax()`方法提供,它封装了XMLHttpRequest对象,使得开发者可以更加便捷地发送HTTP请求。以下是如何...

    Ajax(Ajax,jquery,prototype综合).rar

    4. **数据格式**:虽然名字中有XML,但实际应用中,Ajax并不局限于XML格式。JSON(JavaScript Object Notation)现在更常用,因为它与JavaScript语法紧密相连,解析更方便。 5. **jQuery和Prototype**:这两个是...

    ajax与jquery实现的简单验证实例

    在传统的Web应用中,验证通常发生在服务器端,但使用Ajax和jQuery,我们可以实现前端验证,提供即时反馈,减少用户等待时间。 具体实现步骤可能包括以下几点: 1. **选择器和事件绑定**:使用jQuery的选择器找到...

    ajax WCF jquery ajax WCF jquery

    在"ajax WCF jquery"的场景中,开发者通常会利用jQuery的AJAX函数与WCF服务进行交互。例如,使用`$.ajax()`或`$.getJSON()`方法发起请求,向WCF服务发送数据并接收返回的响应。WCF服务端则需要配置允许跨域访问...

    Ajax和Jquery入门教程[课件+源码]

    **Ajax和jQuery是Web开发中的两个重要技术,用于创建动态和交互式的网页应用。** **Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。** 它通过在后台与服务器...

    php+jquery+ajax最简单例子

    在IT行业中,PHP、jQuery和Ajax是Web开发中的三大核心技术,它们共同构建了现代动态网页交互的基础。这个“php+jquery+ajax最简单例子”旨在教你如何使用这些工具实现一个基本的异步数据交换功能。 首先,让我们...

Global site tag (gtag.js) - Google Analytics