基于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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
学习从实践开始之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
一个简单计数器的源代码
2006/10/09 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
浅析Python中的多重继承
2015/04/28 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
简单了解python的break、continue、pass
2019/07/08 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Django如何重置migration的几种情景
2021/02/24 Python
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
应届生面试求职信
2014/07/02 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
工厂标语大全
2014/10/06 职场文书
单位租房协议范本
2014/12/03 职场文书
教师个人学习总结
2015/02/11 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
Python实现简繁体转换
2021/06/07 Python