基于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中的null和undefined区别介绍
Jan 01 Javascript
Angular中$compile源码分析
Jan 28 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
JS中递归函数
Jun 17 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
VUE递归树形实现多级列表
Jul 15 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 minixml详解
2008/07/19 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
面试后的英文感谢信
2014/02/01 职场文书
小学生安全演讲稿
2014/04/25 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
运动会通讯稿200字
2015/07/20 职场文书
党员反邪教心得体会
2016/01/15 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
详解Redis复制原理
2021/06/04 Redis