基于jquery ajax 用户无刷新登录方法详解_jquery

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 'www.jb51.net!';
?>

下面看个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的速度稍微有些慢(但是现在速度已经大幅提高)

时间: 2024-11-01 21:04:24

基于jquery ajax 用户无刷新登录方法详解_jquery的相关文章

基于jquery ajax 用户无刷新登录详解介绍

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

jQuery实现form表单基于ajax无刷新提交方法详解_jquery

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

jQuery Ajax 全局调用封装实例代码详解_jquery

有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

PHP+Ajax实现无刷新分页实例详解(附demo源码下载)_php技巧

本文实例讲述了PHP+Ajax实现无刷新分页的方法.分享给大家供大家参考,具体如下: 注:这里使用到的一些类库在前面文章都能找到源代码,因此为了缩短文章篇幅,都指明链接所在. 本文讲解内容为: Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)?还是静态页面(.html/

.NET Ajax的无刷新技术实例详解

ajax|刷新|无刷新|详解 下载一个.net Ajax开发包,该开发包包括ASP2.0和目前ASP1.1版使用的Ajax,详细地址参见http://ajax.schwarz-interactive.de/,接下来,开始. 1. 新建一个项目,在引用中添加引用Ajax.dll,Ajax.dll位于下载的压缩包里面. 2.建立HttpHandler,在web.config里面加上: <configuration>lt;system.web>lt;httpHandlers>lt;add

jquery+ajax实现注册实时验证实例详解_jquery

本文实例讲述了jquery+ajax实现注册实时验证.分享给大家供大家参考,具体如下: 当我们注册一个用户时,会实时提示该用户的信息是否可用,这就是ajax的应用,很久以前就看过这个实现了,今天又看了一遍,给记录下来O(∩_∩)O哈! 先介绍下ajax中$.get,由于$.post用法和$.get大同小异就不再介绍了: 这是一个简单的 GET 请求功能以取代复杂 $.ajax .请求成功时可调用回调函数.如果需要在出错时执行函数,请使用 $.ajax. 复制代码 代码如下: $(selector

jQuery遍历DOM元素与节点方法详解_jquery

本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,

jQuery中extend()和fn.extend()方法详解_jquery

这两个方法用的是相同的代码一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例对于基本用法举几个例子 html代码如下 复制代码 代码如下: <!doctype html> <html>    <head>       <title></title>         <script src='jquery-1.7.1.js'></script>    </head>    <

jQuery给元素添加样式的方法详解_jquery

本文实例讲述了jQuery给元素添加样式的方法.分享给大家供大家参考,具体如下: 1.获取和设置样式 $("#tow").attr("class")//获取ID为tow的class属性 $("#two").attr("class","divClass")//设置Id为two的class属性. 2.追加样式 复制代码 代码如下: $("#two").addClass("divCl