基于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 加密压缩出现bug解决方案
Nov 25 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
js实现密码强度检验
Jan 15 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
Vue Render函数原理及代码实例解析
Jul 30 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
解析php中的escape函数
2013/06/29 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
PyQt5每天必学之工具提示功能
2018/04/19 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python实现批量注册网站用户的示例
2019/02/22 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
客服专员岗位职责范本
2013/11/29 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
辞职信的写法
2015/02/27 职场文书
团结主题班会
2015/08/13 职场文书
Promise静态四兄弟实现示例详解
2022/07/07 Javascript