jQ ajax用户无刷新登录方法详解

ajax俗称无刷新登录或局部刷新登录，这样可以提高用户体验了，文章讲到了关于基于jqueryajax用法返回数据与实例2用户无刷新登录

　　Ajax框架就是提供模块化实现Ajax功能的集合，Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现)，Ajax只是jquery中的一部分。

　　实例1 代码如下:

 

　　$.ajax({

　　type:'post',//可选get

　　url:'action.php',//这里是接收数据的PHP程序

　　data:'data='dsa',//传给PHP的数据，多个参数用&连接

　　dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等

　　success:function(msg){

　　//这里是ajax提交成功后，PHP程序返回的数据处理函数。msg是返回的数据，数据类型在dataType参数里定义!

　　},

　　error:function(){

　　ajax提交失败的处理函数!

　　}

　　})

　　PHP action.php

　　复制代码 代码如下:

　　

　　echo 'www.jb51.net!';

　　?>

 

　　下面看个jquery ajax用户无刷新登录实例

　　实例2 代码如下:

  
  
  
  
  
  
$(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）给alert出来  
$('#result').html("姓名:" + json.username +"
密码:" + json.password);//把php中的返回值显示在预定义的result定位符位置  
}  
});  
//$.post()方式：  
$('#test_post').mousedown(function(){  
$.post(  
'login.php',  
{  
username:$('#username').val(),  
password:$('#password').val()  
},  
function (data)//回传函数  
{  
var myjson='';  
eval_r('myjson=' + data +';');  
$('#result').html("姓名1:" + myjson.username +"
密码1:" +myjson.password);  
}  
);  
});  
//$.get()方式：  
$('#test_get').mousedown(function()  
{  
$.get(  
'login.php',  
{  
username:$('#username').val(),  
password:$('#password').val()  
},  
function(data) //回传函数  
{  
var myjson='';  
eval_r("myjson=" + data +";");  
$('#result').html("姓名2:" + myjson.username +"
密码2:" +myjson.password);  
}  
);  
});  
}  
  
  

  

  

输入姓名:

  

输入密码:

  

  
ajax提交  
post提交  
get提交  
  

 

　　php代码如下:

　　使用jquery ajax优点与持缺点分析

　　优点

　　小，压缩后代码只有20多k(无压缩代码94k)。

　　Selector和DOM操作的方便：jQuery的Selector与mootools的Element.Selectors.js比较，CSSSelector, XPath Selector(1.2后已删除)

　　Chaining：总是返回一个jQuery对象，可以连续操作。

　　文档的完整，易用性(每个API都有完整的例子，这是其它框架现在不能比的)，而且网上还有很多其它的文档，书籍。

　　应用的广泛，包括google code也使用了jQuery。

　　使用jQuery的站点：http://docs.jquery.com/Sites_Using_jQuery

　　核心的开发团队和核心人员：John Resig等。

　　简洁和简短的语法，容易记。

　　可扩展性：有大量用户开发的插件可供使用(http://jquery.com/plugins/)

　　jQueryUI(http://jquery.com/plugins/，基于jQuery，但和核心的jQuery是独立的)，不断发展中。

　　友好和活跃的社区：google groups:http://docs.jquery.com/Discussion

　　事件处理有很多方便的方法，如click，而不是单一的addEvent之类的。