基于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 相关文章推荐
javascript new一个对象的实质
Jan 07 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
JS 创建对象的模式实例小结
Apr 28 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
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
python提示No module named images的解决方法
2014/09/29 Python
Python 的 Socket 编程
2015/03/24 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
python将字母转化为数字实例方法
2019/10/04 Python
pandas分批读取大数据集教程
2020/06/06 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
安全生产一岗双责责任书
2014/07/28 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
七年级上册生物的课件
2019/08/07 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫