基于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 在网页中的运用(asp.net)
Nov 23 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
PHP图片加水印实现方法
2016/05/06 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
js控制框架刷新
2008/08/01 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
py-charm延长试用期限实例
2019/12/22 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
python设置中文界面实例方法
2020/10/27 Python
2019史上最全Database工程师题库
2015/12/06 面试题
优秀毕业生自我鉴定
2014/01/19 职场文书
2014学年自我鉴定
2014/02/23 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
讲座新闻稿
2015/07/18 职场文书
导游词之无锡唐城
2019/12/12 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫