足球盘口软件
当前位置: 足球盘口软件 > 前端 >
用户无刷新登录详解介绍,ajax用法与举例

jquery中的ajax超时管理代码,具体代码如下:

jquery里的 $.ajax 方法的效应是由此 HTTP 需要加载远程数据。该办法是 jQuery 底层 AJAX 达成。在该措施的底工上简化出来的一些主意还应该有 $.get, $.post, $.getJSON 等。由于职业中时时会用到 $.ajax 那几个办法,以后专程将以此点子的片段广泛用法做一些笔录。

Ajax框架便是提供模块化达成Ajax成效的集中,Ajax框架能够是各样语言达成的(譬喻SAJAX有种种语言的得以达成卡塔尔国,Ajax只是jquery中的意气风发部分,

<html>
   <head>
     <script src="jquery-1.2.js"></script>
     <script>
       $(document).ready(
         function () {
           $.ajax({
             url: "ajax.error.php",
             timeout: 1000,
             error: function (xmlHttpRequest, error) {
               console.info(xmlHttpRequest, error);
             }
           });
         }
       );
     </script>
   </head>
 </html>

下边是后生可畏段相比常用到的 $.ajax 方法:

实例1

您或者感兴趣的篇章

  • jQuery–鼠标经过(hover)事件的延时管理
  • 鉴于其配备音信(注册表中的)不完全或已破坏,Windows 无法起动那些硬件装置。 (代码 19卡塔 尔(阿拉伯语:قطر‎消除办法
  • php被遗忘的有的成效强盛的字符串管理函数
  • jquery ajax防止重复提交的法子
  • Jquery中$.post和$.ajax的用法解析
  • PHP中的字符串管理函数(String Functions卡塔 尔(英语:State of Qatar) 全总括
  • jQuery select下拉框操作(扩充,删除,更改卡塔尔国整理
  • js中决断贰个数组中是否有重复值的格局

html head script src="jquery-1.2.js"/script script $(document).ready( function () { $.ajax({ url: "ajax.error.php", timeo...

$.ajax({
 type:'GET',
 url:'http://www.phpernote.com/jquery.php',
 data:{username:'phpernote',password:'123456'},
 dataType:'json',
 timeout:3000,
 cache:false,
 async:true,
 beforeSend:function(){
  alert('请求之前');
 },
 success:function(data){
  alert('请求成功');
 },
 error:function(msg){
  alert('请求发生错误');
 }
});

 代码如下 复制代码
$.ajax({
type:'post',//可选get
url:'action.php',//此间是选择数据的PHP程序
data:'data='dsa',//传给PHP的数目,四个参数用&连接
dataType:'text',//服务器再次回到的数据类型 可选XML ,Json jsonp script html text等
success:function(msg){
//这里是ajax提交成功后,PHP程序重返的数量管理函数。msg是回来的数目,数据类型在dataType参数里定义!
},
error:function(){
ajax提交战败的管理函数!
}
})

上述代码只使用到了比较宽泛的有个别参数和管理函数,上边将 $.ajax 方法中保有的参数和函数纠纷列举下:

PHP action.php

参数:

 代码如下 复制代码
<?php
echo 'www.111cn.net!';
?>  

url 类型:String,暗中同意值: 当前页地址。发送央求的地址。

下边看个jquery ajax客商无刷新登入实例

type 类型:String,取值有 "POST" 或 "GET" 三种,暗中同意为 "GET"。注意:别的HTTP 诉求方法,如 PUT 和 DELETE 也足以行使,但仅部分浏览器补助。

实例2

async 类型:Boolean,默许值为 true。暗许设置下,全体央浼均为异步央求(即在执行该ajax央浼之时,不管该央求是不是实践完成,将继续推行上面包车型大巴代码卡塔 尔(阿拉伯语:قطر‎。假诺要求发送同步乞请,请将此选项设置为 false。假若在必要中遇见一些拍卖代码在ajax央求之后,而且这么些管理依赖于ajax的央浼结果时,则在这里个地方最棒设置值为 false。注意,同步央浼将锁住浏览器,客商此外操作必需等待诉求落成才足以试行。

 代码如下 复制代码
<html>
<head>
<title>jQuery Ajax 实例演示</title>
</head>
<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){//这一个便是jQueryready ,它就疑似C语言的main 全数操作包涵在它里面
$("#button_login").mousedown(function(){
login(); //点击ID为"button_login"的按键后触发函数 login();
});
});
function login(){ //函数 login();
var username = $("#username").val();//取框中的顾客名
var password = $("#password").val();//取框中的密码
$.ajax({ //一个Ajax过程
type: "post", //以post方式与后台调换
url : "login.php", //与此php页面交换
dataType:'json',//从php再次来到的值以 JSON形式 解释
data: 'username='+username+'&password='+password, //发给php的多寡有两项,分别是地点传出的u和p
success: function(json){//假如调用php成功
//alert(json.username+'n'+json.password); //把php中的重回值(json.username卡塔 尔(英语:State of Qatar)给 alert出来
$('#result').html("姓名:" + json.username + "<br/>密码:" + json.password); //把php中的重返值展现在预订义的result定位符地方
}
});
//$.post()方式:
$('#test_post').mousedown(function (){
$.post(
'login.php',
{
username:$('#username').val(),
password:$('#password').val()
},
function (data) //回传函数
{
var myjson='';
eval('myjson=' + data + ';');
$('#result').html("姓名1:" + myjson.username + "<br/>密码1:" + myjson.password);
}
);
});
//$.get()方式:
$('#test_get').mousedown(function ()
{
$.get(
'login.php',
{
username:$('#username').val(),
password:$('#password').val()
},
function(data) //回传函数
{
var myjson='';
eval("myjson=" + data + ";");
$('#result').html("姓名2:" + myjson.username + "<br/>密码2:" + myjson.password);
}
);
});
}
</script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
<p><span>输入人名:</span><input type="text" name="username" id="username" /></p>
<p><span>输入密码:</span><input type="text" name="password" id="password" /></p>
</form>
<button id="button_login">ajax提交</button>
<button id="test_post">post提交</button>
<button id="test_get">get提交</button>
</body>
</html>  

cache 类型:Boolean,默许值为 true,当参数 dataType 设置为 script 或 jsonp 时默以为 false。设置为 false 的处境下在延续伸手时将不缓存上二次的诉求数据。jQuery 1.2 新添的功用。

php代码

contentType 类型:String,暗中同意值: "application/x-www-form-urlencoded"。发送音讯至服务器时内容编码类型,也可安装为 "application/json; charset=utf-8"。暗许值符合大超多动静。假如您显明地传递了一个content-type 给 $.ajax() 那么它必定会发送给服务器(即使未有数据要发送卡塔 尔(阿拉伯语:قطر‎。

 

data 类型:String,发送到服务器的数码。日常格式为{key1:value1,key2,value2},假若为数组,jQuery 将活动为差异值对应同一个称谓。如 {foo:["bar1", "bar2"]} 调换为 '&foo=bar1&foo=bar2',若无值的话,可一向为空{}。

 代码如下 复制代码
<?php
echo json_encode(array ('username'=>$_REQUEST['username'],'password'=>$_REQUEST['password']));
?> 

dataType 类型:String,钦命服务器重回的数据类型。如若不点名,jQuery 将机关遵照 HTTP 包 MIME 音讯来智能决断,比方 XML MIME 类型就被辨认为XML。在 1.4 中,JSON 就能够转移二个 JavaScript 对象,而 script 则会推行这几个本子。随后服务器端再次来到的数据会依据这一个值解析后,传递给回调函数。该参数的值有以下可选:

选择jquery ajax优点与持劣势解析

"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 重临纯文本 HTML 音讯;包罗的 script 标签会在插入 dom 时实行。
"script": 重临纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在中间距诉求时(不在同多少个域下),全数 POST 央求都将转为 GET 要求。(因为将运用 DOM 的 script标签来加载卡塔 尔(阿拉伯语:قطر‎
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 方式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为无误的函数名,以实践回调函数。
"text": 重返纯文本字符串

优点
小,压缩后代码唯有20多k(无压缩代码94k卡塔 尔(英语:State of Qatar)。
Selector和DOM操作的便利:jQuery的Selector与mootools的Element.Selectors.js相比较,CSS Selector, XPath Selector(1.2后已删除卡塔 尔(阿拉伯语:قطر‎
Chaining:总是回到多个jQuery对象,能够三回九转操作。
文书档案的完全,易用性(各个API都有完整的例证,那是其余框架将来不能够比的卡塔尔国,并且互连网还也可能有不菲其余的文书档案,书籍。
选取的科学普及,满含google code也利用了jQuery。

ifModified 类型:Boolean,仅在服务器数据变动时拿到新数据。暗许值: false。使用 HTTP 包 Last-Modified 头音信判别。在 jQuery 1.4 中,它也会检查服务器钦命的 'etag' 来规定数据未有被改变过。

使用jQuery的站点:
基本的付出公司和着力人士:John Resig等。
删繁就简和简易的语法,轻松记。
可扩充性:有大气客户支付的插件可供使用()
jQuery UI(,基于jQuery,但和主导的jQuery是单独的卡塔 尔(阿拉伯语:قطر‎,不断上扬中。
和煦和活泼的社区:google groups:
事件管理有许多利于的主意,如click,并非十足的add伊夫nt之类的。

timeout 类型:Number,设置哀告超时时间(单位:纳秒卡塔 尔(英语:State of Qatar)。此设置将覆盖全局设置。

缺点
由于规划思想是追求急迅和简练,未有面向对象的扩张。设计思路和Mootools不平等。
CSS Selector的快慢有一点点有些慢(然则今后速度已经小幅度升高卡塔 尔(阿拉伯语:قطر‎

global 类型:Boolean,是还是不是接触全局 AJAX 事件。暗中认可值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用以调节分裂的 Ajax 事件。

更加多详细内容请查看:

processData 类型:Boolean,私下认可值: true。暗中同意情状下,通过data选项传递步向的数额,就算是一个指标(本事上讲只要不是字符串),都会处理转化成二个查询字符串,以合作私下认可内容类型 "application/x-www-form-urlencoded"。借使要发送 DOM 树音信或别的不期望转变的消息,请设置为 false。

jsonpCallback 为 jsonp 恳求钦命二个回调函数名。这么些值将用来代表 jQuery 自动生成的放肆函数名。那第生机勃勃用来让 jQuery 生成度独特的函数名,那样管理须要更便于,也能方便人民群众地提供回调函数和错误管理。你也得以在想让浏览器缓存 GET 需要的时候,钦点那一个回调函数名。

管理函数:

beforeSend(XMLHttpRequest) 发送央浼前可更正 XMLHttpRequest 对象的函数,如增加自定义 HTTP 头。XMLHttpRequest 对象是唯生龙活虎的参数。这是二个 Ajax 事件。假如回到 false 能够撤废这一次 ajax 央求。

complete(XH讴歌ZDX,TS) 乞请完成(不管是否成功卡塔 尔(英语:State of Qatar)后回调函数。参数: XMLHttpRequest 对象和叁个陈诉供给类型的字符串。

dataFilter 给 Ajax 再次回到的庐山真面目目数据的张开预管理的函数。提供 data 和 type 八个参数:data 是 Ajax 再次回到的原来数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数再次来到的值将由 jQuery 进一层管理。

error 暗中认可值: 自动判定 (xml 或 html)。央求战败时将调用此函数。有以下几个参数:XMLHttpRequest 对象、错误音信、(可选卡塔尔捕获的不胜对象。如若发生了错误,错误消息(第1个参数卡塔 尔(英语:State of Qatar)除了拿走 null 之外,还只怕是 "timeout", "error", "notmodified" 和 "parsererror"。

success 乞求成功后的回调函数。参数:由服务器再次来到,并依照 dataType 参数伸开始拍戏卖后的数目;描述状态的字符串。

xhr 要求回到一个 XMLHttpRequest 对象。暗中同意在 IE 下是 ActiveXObject 而别的意况下是 XMLHttpRequest 。用于重写可能提供多少个坚实的 XMLHttpRequest 对象。那么些参数在 jQuery 1.3 从前不可用。

下面所介绍的局地参数并非全方位的参数,还应该有大器晚成对不时用的,由于工作中用到的相当少就从未写进去。

你只怕感兴趣的篇章

  • jquery $.ajax $.post大概$.get怎么着提交checkbox的值
  • Jquery中$.post和$.ajax的用法深入分析
  • javascript落到实处原生ajax的二种方法
  • 后台 ajax 异步修改示例
  • jquery ajax防止再度提交的点子
  • Jquery等待ajax奉行完结再继续实行上面代码的机能
  • jquery中ajax超时管理
  • php防范XSS攻击,ajax跨域攻击的方法

$.ajax 方法的功力是因此 HTTP 乞求加载远程数据。该方法是 jQuery 底层 AJAX 实现。在该办法的底工上简化出来的有的主意还也会有 $.ge...

返回顶部