基于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 相关文章推荐
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 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的宝库目录--PEAR
2006/10/09 PHP
桌面中心(四)数据显示
2006/10/09 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
理解javascript正则表达式
2016/03/08 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
学生顶撞老师的检讨书
2014/09/17 职场文书
导游词之湖北武当山
2019/09/23 职场文书
八年级作文之友谊
2019/12/02 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
详解Python内置模块Collections
2022/03/22 Python
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python