基于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中面向对象技术的模拟
Sep 25 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 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
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
jquery获取radio值实例
2014/10/16 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
庆祝教师节活动方案
2014/01/31 职场文书
高中军训第一天感言
2014/03/06 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
面试自我评价范文
2014/09/17 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
详解OpenCV曝光融合
2022/04/29 Python