搜索
首页web前端js教程jQuery中Ajax的get、post等方法详解_jquery

load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值。

在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法)

$.get()方法使用GET方式来进行异步请求。结构为:$.get(url [, data] [, callback] [, type])

$.get()方法参数解释如下:

参数名称 类型 说明
url String 请求的HTML页的URL地址
data(可选) Object 发送至服务器的key/value数据会作为QueryString附加到请求URL中
callback(可选) Function 载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法
type(可选) String 服务器端返回内容的格式,包括xml、html、script、json、text和_default

$.post()方法。

$.post()和$.get()方法的结构和使用方式相同,不过它们之间仍然有以下区别:

 GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器。
 GET方式对传输的数据有大小限制(通常不大于2KB),而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制)
 GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说可以避免这些问题
 GET方式和POST方式传递的数据在服务器端的获取也不相同。
 

$.getScript():jQuery提供了此方法来直接加载js文件,与加载一个HTML片段一样简单方便,并且不需要对JavaScript文件进行处理,JavaScript文件会自动执行。

jQuery代码如下:

复制代码 代码如下:

$(function () {
        $("#send").click(function () {
            $.getScript("test.js");
        });
})

与其他ajax方法一样,$.getScript()方法也有回调函数,它会在JavaScript文件载入成功后运行。

例如:想载入jQuery官方颜色动画插件(jquery.color.js),成功后给元素绑定颜色变化动画:

复制代码 代码如下:




   
   
   
   








 

$.getJson():该方法用于加载JSON文件,用法与$.getScript()相同。

复制代码 代码如下:




   
   
   
   





   


已有评论:




';
                })
                $('#resText').html(html);
            })
        })
    })


test.json文件为:

复制代码 代码如下:

[
  {
    "username": "张三",
    "content": "沙发."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
]

 
使用JSONP形式的回调函数来加载其他网站的JSON数据。例如:

复制代码 代码如下:




   
   
   
   



   







注意:

jQuery将自动把URL里的回调函数,例如"url?callback=?"中的后一个”?“替换为正确的函数名,以执行回调函数。
JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过JavaScript Callback的形式实现跨域访问。由于JSON只是一种含有简单括号结构的纯文本,因此许多通道都可以交换JSON消息。而由于同源策略的限制,开发人员不能在于外部服务器进行通信的时候使用XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法,即通过使用JSON和<script>标记相结合的方法,从服务器端直接返回可执行的JavaScript函数调用或者JavaScript对象。目前JSONP已经成为各大公司的Web应用程序跨域首选。<br /> $.ajax()方法时jQuery最底层的ajax实现。它的结构为:</script>

$.ajax(options).该方法只有一个参数,但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式存在,所有参数都是可选的,

常用参数列表为:

 

参数名称 类型 说明
url String (默认为当前页地址)发送请求的地址
type String 请求方式(post或get)默认为get。注意其他HTTP请求方法,如PUT何DELETE也可以使用,但仅部分浏览器支持
timeout Number 设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置
data Object或String 发送到服务器的数据。如果不是字符串,将自动转换为字符串格式。GET请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如{foo1:"bar1", foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,jQuery将自动为不同值对应同一个名称。例如{foo:["bar1", "bar2"]}转换为&foo=bar1&foo=bar2
dataType String

预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下。

xml:返回XML文档,可用jQuery处理

html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行

script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。

json:返回JSON数据

jsonp:JSONP格式。使用JSONP形式调用函数时,例如myurl?callback=?,jQuery将自动替换后一个”?“为正确的函数名,以执行回调函数。

text:返回纯文本字符串

beforeSend Function

发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest对象是唯一的参数。

function(XMLHttpRequest) {

  this;//调用本次Ajax请求时传递的options参数

}

complete Function

请求完成后调用的回调函数(请求成功或失败时均调用)

参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。

function(XMLHttpRequest, textStatue){

  this;//调用本次Ajax请求时传递的options参数

}

success Function

请求成功后调用的回调函数,有两个参数。

(1)由服务器返回,并根据dataType参数进行处理后的数据

(2)描述状态的字符串

function(data, textStatus) {

  //data可能是xmlDoc、jsonObj、html、text等

  this;//调用本次Ajax请求时传递的options参数

}

error Function

请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。

Ajax事件函数如下:

function(XMLHttpRequest, textStatus, errorThrown) {

  //通常情况下textStatus和errorThrown只有其中一个包含信息

  this;//调用本次Ajax请求时传递的options参数

}

global Boolean 默认为true。表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件,AjaxStart或AjaxStop可用于控制各种Ajax事件
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),