基于jquery ajax 用户无刷新登录方法详解


Posted in Javascript onApril 28, 2012

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 html text等 
success:function(msg){ 
//这里是ajax提交成功后,PHP程序返回的数据处理函数。msg是返回的数据,数据类型在dataType参数里定义! 
}, 
error:function(){ 
ajax提交失败的处理函数! 
} 
})

PHP action.php
<?php 
echo '3water.com!'; 
?>

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

实例2

<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)给 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>

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

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

优点
小,压缩后代码只有20多k(无压缩代码94k)。
Selector和DOM操作的方便:jQuery的Selector与mootools的Element.Selectors.js比较,CSS Selector, XPath Selector(1.2后已删除)
Chaining:总是返回一个jQuery对象,可以连续操作。
文档的完整,易用性(每个API都有完整的例子,这是其它框架现在不能比的),而且网上还有很多其它的文档,书籍。
应用的广泛,包括google code也使用了jQuery。

使用jQuery的站点:http://docs.jquery.com/Sites_Using_jQuery
核心的开发团队和核心人员:John Resig等。
简洁和简短的语法,容易记。
可扩展性:有大量用户开发的插件可供使用(http://jquery.com/plugins/)
jQuery UI(http://jquery.com/plugins/,基于jQuery,但和核心的jQuery是独立的),不断发展中。
友好和活跃的社区:google groups:http://docs.jquery.com/Discussion
事件处理有很多方便的方法,如click,而不是单一的addEvent之类的。

缺点
由于设计思想是追求高效和简洁,没有面向对象的扩展。设计思路和Mootools不一样。
CSS Selector的速度稍微有些慢(但是现在速度已经大幅提高)

Javascript 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
JavaScript 基础问答三
Dec 03 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 #Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 #Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 #Javascript
仿微博字符限制效果实现代码
Apr 20 #Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 #Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 #Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 #Javascript
You might like
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
php实现可逆加密的方法
2015/08/11 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
社会实践活动总结报告
2014/04/29 职场文书
好的旅游活动方案
2014/08/19 职场文书
新课培训心得体会
2014/09/03 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
幼儿园辞职信
2015/05/13 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书