基于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分析
Jul 25 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
vue环境搭建简单教程
Nov 07 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
vue中锚点的三种方法
Jul 06 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
javascript 写类方式之三
2009/07/05 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
python批量提交沙箱问题实例
2014/10/08 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python编程嵌套函数实例代码
2018/02/11 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
父亲追悼会答谢词
2014/01/17 职场文书
大学生个人事迹材料
2014/01/21 职场文书
会计试用期自我评价
2014/09/19 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers