基于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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
微信小程序实现电子签名功能
Jul 29 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数据缓存的使用说明
2013/05/10 PHP
php class类的用法详细总结
2013/10/17 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
js实现省级联动(数据结构优化)
2020/07/17 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python 获取项目根路径的代码
2019/09/27 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
初中物理教学反思
2016/02/19 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
java设计模式--建造者模式详解
2021/07/21 Java/Android
Java8中接口的新特性使用指南
2021/11/01 Java/Android
教你部署vue项目到docker
2022/04/05 Vue.js