用JQuery实现ajax技术的常用方法

在我的前一篇用js实现ajax的三种技术中,我提到了怎么用原生的js代码去实现ajax技术,但是 可以看到,代码相对于来说还是比较多,在我们实际的开发中,我们用到的比较多的技术是用jquery来实现,因为相对于js来说, 用jquery来实现ajax技术会简单很多,因为它将一些通用的代码都封装在一些方法里面,我们可以直接调用方法即可使用, 非常方便,所有下面我就总结了关于jquery实现ajax的一些常用方法。

一、load(url, args)



概述:load()方法是最为简单和常用的方法,它的方法是载入远程 HTML 文件代码并插入至 DOM 中。

参数:url:目标URL

args:需要传给目标url的参数

举例:点击a链接,在对应位置#msg加上a链接目标页面返回来的Html代码

$(function(){
    $("a").click(function(){
        var url=this.href;
        var args={"time":new Date()};
        $(‘$msg‘).load(url,args);
        return false;
    });
})

callback:回调函数,当响应结束时,回调函数被触发,响应结果会返回给data参数,响应结果可以是xml;html;json的任意一种

二、$.get(url, args, [callback])



参数: url:待载入页面的URL地址

args:需要传给目标url的参数

callback:载入成功时回调函数。

举例:点击a链接,在对应位置#msg加上a链接目标页面返回来的xml代码

$(function(){
    $("a").click(function(){
        var url=this.href;
        var args={"time":new Date()};
        //data是返回的响应数据
        $.get(url,args,function(data){
            //获取xml文件值的方法
            var msg=$(data).find("name").text();
            $("#msg").empty.append("需要添加的html代码");
        });

        return false;
    });
})

三、$.getJSON(url, args, [callback])



参数: url:待载入页面的URL地址

args:需要传给目标url的参数

callback:载入成功时回调函数。

说明:与get()方法稍有不同,在获取响应结果时需要告知此返回结果是一个JSON文件

举例:点击a链接,在对应位置#msg加上a链接目标页面返回来的json文件

$(function(){
    $("a").click(function(){
        var url=this.href;
        var args={"time":new Date()};
        //data是返回的响应数据
        $.get(url,args,function(data){
            //获取json文件值的方法,因为已经告知是json文件,所以可以直接用data获取
            var msg=data.name;
            $("#msg").empty.append("需要添加的html代码");
        });

        return false;
    });
})
时间: 2024-12-13 01:41:26

用JQuery实现ajax技术的常用方法的相关文章

JQuery的Ajax技术

jquery是一个优秀的js框架,自然对js原生的ajax进行了封装, 封装后的ajax的操作方法更简洁,功能更强大,与ajax操作 相关的jquery方法有如下几种: Ajax 请求 $.ajax([options]) load(url, [data], [callback]) $.get(url, [data], [fn], [type]) $.getJSON(url, [data], [fn]) $.getScript(url, [callback]) 但开发中    经常使用的有三种:

使用JavaScript和jQuery简单实现Ajax技术

Ajax的定义 Ajax被认为是(Asynchronous JavaScript and XML的缩写). 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. Ajax的工作原理 Ajax的核心是JavaScript对象XmlHttpRequest.XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户. 一.使用JavaScript实现Ajax技术 1.首先建立一个jsp页面,导入js页面并且新建一个测试按钮. <script typ

Js原生Ajax和Jquery的Ajax

一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死 2.Ajax的运行原理 页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面1 功能. 二

5)bootstrcp和ajax技术的使用和介绍

JQ的dom用法: append:追加 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div class="box"></div><script src="0

jQuery学习笔记10:Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

前端技术Jquery与Ajax使用总结

前端技术Jquery与Ajax使用总结 虽然主要是做的后端,但是由于有些时候也要写写前台的界面,因此也就学习了下Jquery和Ajax的一些知识,虽说此次写的这些对于前端大神来说有些班门弄斧的感觉,但是为了加深自己的记忆,还是总结一下下,有什么不对的地方欢迎大家指出~ 准备工作 由于我是使用的bootstrap,所以有些操作也是基于它来进行的,比如说模态框什么的,有关bootstrap的相关知识可以到这里去学习.然后这个项目用的是Struts框架.好了,基本情况就是酱紫了. 将jquery的包以

JQuery Ajax技术知识

=======================================JQuery Ajax技术知识=========================================== 1.serializeArray()通过序列化表单值来创建对象数组(名称和值). 可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. 语法: $(selector).serializeArray() 返回值: 注意:此方法返回的是 JSON 对象而非 J

利用jQuery Ajax技术实现每隔5秒向某页面传值

有时候我们需要每隔一段时间向某页面传值,比如说聊天室,每隔几秒就像数据库处理页面传值并取回,然后显示在聊天窗口.又或者是每隔一段时间就查询用户最后发言时间到现在是否间隔2分钟,如果是则将用户退出.这个时候我们就要用到HTML DOM setInterval() 方法. setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回

93G通过项目学PHP+Ajax+jQuery网站开发技术 PHP+Ajax+jQuery项目实战课程

===============课程目录===============<项目一:PHP网站搭建>├1.认识PHP.mp4├2.常用编辑工具.mp4├3.开发环境搭建.mp4├4.配置虚拟主机.mp4└5.项目部署.mp4<项目二 学生信息管理>├1.PHP标记与注释.mp4├2.标识符与关键字.mp4├3.变量与常量.mp4├4.数据类型.mp4├5.输出语句.mp4├6.任务一:展示学生资料.mp4├7.date()函数.mp4├8.PHP运算符.mp4├9.运算符优先级.mp4├