php ajax实现无刷新检测用户名是否可用
作者：用户
本文讲的是php ajax实现无刷新检测用户名是否可用，
直接上代码有点不厚道、于是按照天朝传统，整段描述吧。。。。（本人语言表达能力有限，大家忍着看）
直接上代码有点不厚道、于是按照天朝传统，整段描述吧。。。。（本人语言表达能力有限，大家忍着看）
在网站注册用户时使用，主要为了无刷新异步验证用户输入的用户名或者Email是否已注册。
这功能大家肯定见过，大多数网站都有的，我一直对这个功能很感兴趣，所以这几天研究了下 jQuery + Ajax
整了一个功能不算完善，但足以应付普通使用的代码 (更牛的功能大家自己去发掘)
文 件 说 明
reg.php //为注册页面
check_user.php //为用户验证页面 (GET,POST方式任选)
jquery-1.7.1.js
//为jQuery文件
下载地址：/jquery-1.7.1.js (右键另存为即可)
reg.php 注册页面（内含2种方式，请任选一种）
&!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.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&title&PHP+Ajax 异步通讯注册验证&/title&
&script type="text/javascript" src="jquery-1.7.1.js"&&/script& &!--千万别忘记引用jQuery文件，否则无法执行--&
&script type="text/javascript"&
$(function(){
jQuery(普通应用时推荐，简单易用)
$("#user").blur(function(){
//文本框鼠标焦点消失事件
$.get("check_user.php?user="+$("#user").val(),null,function(data)
//此处get方式 可换为post方式按需求调整，其他无需修改使用方式一样
$("#chk").html(data);
//向ID为chk的元素内添加html代码
aJax方式 (比较复杂，如无特殊需求推荐使用方式一)
$("#user").blur(function(){
url:"check_user.php", //请求验证页面
type:"GET", //请求方式 可换为post
注意验证页面接收方式
data:"user="+$("#user").val(), //取得表文本框数据，作为提交数据 注意前面的 user
此处格式 key=value
其他方式请参考ajax手册
success: function(data)
//请求成功时执行操作
$("#chk").html(data); //向ID为chk的元素内添加html代码
&form id="reg" action="" method="post"&
用户名：&input id="user" type="text" /& &span id="chk"&&/span&
check_user.php 异步通信页面 代码如下：
header("Content-type:text/charset=gb2312");
//GET方式获取数据（取决于异步提交时提交方式）
if($_GET['user'])
$user=$_GET['user'];
//此处可进行数据库匹配，本次省略直接判断
if($user=="admin")
echo "&font color=red&用户名已被注册！&/font&";
echo "&font color=red&用户名可以使用&/font&";
//POST方式获取数据（取决于异步提交时提交方式）
if($_POST['user'])
$user=$_POST['user'];
//此处可进行数据库匹配，本次省略直接判断
if($user=="admin")
echo "&font color=red&用户名已被注册！&/font&";
echo "&font color=red&用户名可以使用&/font&";
上面的2种方式分别又存在 post 和 get 两种方式，所以可以说有4种方式选择，应该可以满足普通应用了。
另外关于Ajax 内其他参数例如：请求数据类型，ajax开始操作等等事件。请参考ajax手册。这里不做阐述，较为复杂推荐使用第一种方式。
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ajax
ajax无刷新验证用户名、ajax无刷新检测用户名、ajax实现用户名验证、ajax实现页面局部刷新、ajax如何实现局部刷新，以便于您获取更多的相关知识。
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
开发者常用软件，超百款实用软件一站式提供
云栖社区()为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！基于jquery ajax 用户无刷新登录方法详解
字体：[ ] 类型：转载 时间：
ajax俗称无刷新登录或局部刷新登录，这样可以提高用户体验了，文章讲到了关于基于jquery ajax用法返回数据与实例2用户无刷新登录
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:border:1width:300height:200"&&/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 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的站点：/Sites_Using_jQuery 核心的开发团队和核心人员：John Resig等。 简洁和简短的语法，容易记。 可扩展性：有大量用户开发的插件可供使用（/plugins/） jQuery UI（/plugins/，基于jQuery，但和核心的jQuery是独立的），不断发展中。 友好和活跃的社区：google groups:/Discussion 事件处理有很多方便的方法，如click，而不是单一的addEvent之类的。 缺点 由于设计思想是追求高效和简洁，没有面向对象的扩展。设计思路和Mootools不一样。 CSS Selector的速度稍微有些慢（但是现在速度已经大幅提高）
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具后使用快捷导航没有帐号？
只需一步，快速开始
查看: 19916|回复: 5
jquery ajax如何传递参数到php中去？
UID484208在线时间 小时积分3440帖子离线17465 天注册时间
金牌会员, 积分 3440, 距离下一级还需 1560 积分
下面问题是从这个问题延迟出来的：
下面的index.htm提交以后，通过addpage.php生成了result.htm，但没有得到folder和page的数据，数据为空白。请问要怎么设置？
index.htm的代码：
&title&ajax&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&script type=&text/javascript& src=&http://localhost/leb/auto/js/jquery-latest.js&&&/script&
&script type=&text/javascript& &
$(function(){
$(&#config&).submit(function(){
type:&GET&,
url:&addpage.php&,
&form name=&config& method=&post& id=&config&&
&div class=&infotitle&&主目录：&/div&
&input name=&folder& type=&text&/&
&div class=&infotitle&&页面名称：&/div&
&input name=&page& type=&text&/&
&div class=&submit&&
&button type=&submit& id=&submit&&确定&/button&
&提示：您可以先修改部分代码再运行
addpage.php中的代码:
&?php
/*
* Created on
* To change the template for this generated file go to
* Window - Preferences - PHPeclipse - PHP - Code Templates
$folder=$_POST['folder'];
$page=$_POST['page'];
$file=fopen('result.htm','w');
fwrite(
& & & & $file,
& & & & &文件夹为：&.$folder.'&br&'.
& & & & &模板页为：&.$page.'&br&'
);
fclose($file);
?&复制代码
UID207382在线时间 小时积分19611帖子离线17465 天注册时间
查看jquery的API.
ajax对像有个 success 方法. 这个是回调函数
UID102415在线时间 小时积分8302帖子离线17465 天注册时间
&html&
&head&
&title&ajax&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&script type=&text/javascript& src=&http://localhost/leb/auto/js/jquery-latest.js&&&/script&
&script type=&text/javascript& &
& & & & $(function(){
& & & & & & & & $(&#config&).submit(function(){
& & & & & & & & & & & & $.ajax({
& & & & & & & & & & & & & & & & type:&POST&,
& & & & & & & & & & & & & & & & url:&addpage.php&,
& & & & & & & & & & & & & & & & data:$('#config').serialize(),//格式化表单参数或者也可以使用data:{'folder':$('input[name=folder]').val(),'page':$('input[name=page]').val()},
& & & & & & & & & & & & & & & & dateType:'text',
& & & & & & & & & & & & & & & & success:function(data){//数据提交成功时返回数据
& & & & & & & & & & & & & & & & & & & & alert(data);
& & & & & & & & & & & & & & & & }
& & & & & & & & & & & & });
& & & & & & & & & & & &
& & & & & & & & });
& & & & });
&/script&
&/head&
&body&
& & & & &form name=&config& method=&post& id=&config&&
& & & & & & & & &div class=&infotitle&&主目录：&/div&
& & & & & & & & &input name=&folder& type=&text&/&
& & & & & & & & &div class=&infotitle&&页面名称：&/div&
& & & & & & & & &input name=&page& type=&text&/&
& & & & & & & & &div class=&submit&&
& & & & & & & & & & & & &button type=&submit& id=&submit&&确定&/button&
& & & & & & & & &/div&
& & & & &/form&
&/body&
&/html&
另外用简化的$.get或$.post都可以，方便很多
$.get('addpage.php',data:{'folder':$('input[name=folder]').val(),'page':$('input[name=page]').val()},function(data){
& & & & alert(data);
[[i] 本帖最后由 wxyhhy911 于
09:59 编辑 ]
UID102415在线时间 小时积分8302帖子离线17465 天注册时间
返回值:XMLHttpRequestjQuery.ajax([options])
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。
$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。
注意： 如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 &text/xml&)。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。
注意：如果dataType设置为&script&，那么在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 &myurl?callback=?& jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 &jsonp& 时，jQuery 将自动调用回调函数。
options (可选)ObjectAJAX 请求设置。所有选项都是可选的。
asyncBoolean(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSendFunction发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。
function (XMLHttpRequest) {
& & // 调用本次AJAX请求时传递的options参数
cacheBoolean(默认: true,dataType为script时默认为false) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
completeFunction请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串。 Ajax 事件。
function (XMLHttpRequest, textStatus) {
& & // 调用本次AJAX请求时传递的options参数
contentTypeString(默认: &application/x-www-form-urlencoded&) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
dataObject,String发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[&bar1&, &bar2&]} 转换为 '&foo=bar1&foo=bar2'。
dataFilterFunction给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function (data, type) {
& & // 对Ajax返回的原始数据进行预处理
& & return data&&// 返回处理后的数据
dataTypeString
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:
&xml&: 返回 XML 文档，可用 jQuery 处理。
&html&: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
&script&: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了&cache&参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
&json&: 返回 JSON 数据 。
&jsonp&: JSONP 格式。使用 JSONP 形式调用函数时，如 &myurl?callback=?& jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
&text&: 返回纯文本字符串
errorFunction(默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数有以下三个：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是&timeout&, &error&, &notmodified& 和 &parsererror&。Ajax 事件。
function (XMLHttpRequest, textStatus, errorThrown) {
& & // 通常 textStatus 和 errorThrown 之中
& & // 只有一个会包含信息
& & // 调用本次AJAX请求时传递的options参数
globalBoolean(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModifiedBoolean(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
jsonpString在一个jsonp请求中重写回调函数的名字。这个值用来替代在&callback=?&这种GET或POST请求中URL参数里的&callback&部分，比如{jsonp:'onJsonPLoad'}会导致将&onJsonPLoad=?&传给服务器。
passwordString用于响应HTTP访问认证请求的密码
processDataBoolean(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 &application/x-www-form-urlencoded&。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
scriptCharsetString只有当请求时dataType为&jsonp&或&script&，并且type是&GET&才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。
successFunction请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。 Ajax 事件。
function (data, textStatus) {
& & // data 可能是 xmlDoc, jsonObj, html, text, 等等...
& & // 调用本次AJAX请求时传递的options参数
timeoutNumber设置请求超时时间（毫秒）。此设置将覆盖全局设置。
typeString(默认: &GET&) 请求方式 (&POST& 或 &GET&)， 默认为 &GET&。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
urlString(默认: 当前页地址) 发送请求的地址。
usernameString用于响应HTTP访问认证请求的用户名
xhrFunction需要返回一个XMLHttpRequest 对象。默认在IE下是ActiveXObject 而其他情况下是XMLHttpRequest 。用于重写或者提供一个增强的XMLHttpRequest 对象。这个参数在jQuery 1.3以前不可用。
加载并执行一个 JS 文件。
jQuery 代码:
&&type: &GET&,
&&url: &test.js&,
&&dataType: &script&
保存数据到服务器，成功时显示信息。
jQuery 代码:
& &type: &POST&,
& &url: &some.php&,
& &data: &name=John&location=Boston&,
& &success: function(msg){
& &&&alert( &Data Saved: & + msg );
装入一个 HTML 网页最新版本。
jQuery 代码:
&&url: &test.html&,
&&cache: false,
&&success: function(html){
& & $(&#results&).append(html);
同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
jQuery 代码:
var html = $.ajax({
&&url: &some.php&,
&&async: false
}).responseT描述:
发送 XML 数据至服务器。设置 processData 选项为 false，防止自动转换数据格式。
jQuery 代码:
var xmlDocument = [create xml document];
& &url: &page.php&,
& &processData: false,
& &data: xmlDocument,
& &success: handleResponse
UID180155在线时间 小时积分3966帖子离线17465 天注册时间
金牌会员, 积分 3966, 距离下一级还需 1034 积分
主要是得加上 禁止表单的默认行为啊。
UID484208在线时间 小时积分3440帖子离线17465 天注册时间
金牌会员, 积分 3440, 距离下一级还需 1560 积分
结合911哥和fanbin哥的意见，终于写出来无需跳转和刷新就能运行php文件的ajax代码来了，谢谢各位大侠！
&script type=&text/javascript& &
& & $(function(){
& && &&&$(&#config&).submit(function(){
& && && && &$.ajax({
& & & & & & & & cache:false,
& && && && && & type:&POST&,
& && && && && & url:&addpage.php&,
& && && && && & data:$('#config').serialize(),//格式化表单参数或者也可以使用data: {'folder':$('input[name=folder]').val(),'page':$('input[name=page]').val()},
& && && && && & dateType:'text',
& && && && &});
& & & && &&&
& && &&&});
Powered by