基于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实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
Seajs源码详解分析
Apr 02 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 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
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python黑魔法之编码转换
2016/01/25 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
UML设计模式笔试题
2014/06/07 面试题
2014年党员整改措施范文
2014/09/21 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
Python预测分词的实现
2021/06/18 Python