实现基本异步数据传输，略去与数据库交换，先直接在PHP端判断：用户名为 user1 即为不可用，

测试时外加了 普遍的 “Loading..." 功能，此功能可直接在PHP中循环延时 for($i=0;$i<10000000;$i++) 即可

最终效果如下：

代码如下，供日后回味参考...

PHP 部分 ： 其中 user 为传送过来的元素

for($i=0;$i<10000000;$i++);

$user = $_GET['user'];

$str = "";

if($user == "user1")

   $str .="User name already exists !";

else

    $str .="User name is ok ~";

//echo json_encode($str) ;

echo ($str) ;

jQuery 部分：

<script language="javascript" src="jquery.min.js"  src="ajaxlib.js"src="ajaxgold.js"></script>

<script language="javascript" type="text/javascript">

$(function(){

     $("#check").ajaxSend(function(){

         $(this).html("<font style='background:#990000; color:#ffffff;'> Loading...</font>");

     });

});

function startCheck(oInput){

    if(!oInput.value){

        oInput.focus();

        $("#check").html("User name can not be empty !");

        return;

    }

/*    $.ajax({

        url: 'config.php',

        type: 'GET',

        dataType: 'json',

        data: oInput.value,

        success: showResult

         });

    */

    $.get("config.php",

            {user: oInput.value },

           function(data){

           showResult(data);

            }

            );

}

function showResult(oText){

var oSpan = document.getElementById("check");

oSpan.innerHTML = oText;

if(oText.indexOf("exists")>=0)

    oSpan.style.color = "red";

else

    oSpan.style.color = "green";

}

</script>

CSS 样式设置部分：

<style type="text/css">

body{

    padding-left:200px;

}

</style>

</head>

<body>

<form name="form1"><table>

<tr>

<td>用户名：</td>

<td  colspan="2"><input type="text" name="User" onblur="startCheck(this)"/></td>

<td><span id="check"></span></td>

</tr>

<tr>

<td>输入密码：</td>

<td colspan="2"><input type="password" name="passw1"/></td><td></td>

</tr>

<tr>

<td>重复密码：</td>

<td colspan="2"><input type="password" name="passw2"/></td><td></td>

</tr>

<tr>

<td></td><td><input type="submit"value="注册"/></td>

<td><input type="reset" value="重置"/></td><td></td>

</tr>

</table></form>

</body>

学了数据库再慢慢从中搜索...

jQuery+Ajax+PHP 制作简单的异步数据传输（测试用户名是否可用）的更多相关文章

  1. jquery 和 FormData 最简单图片异步上传

    <script src="/scripts/jquery/jquery-3.1.1.min.js"></script> <script type=&q ...

  2. 使用 jQuery Ajax 异步登录，并验证用户输入信息（maven）

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...

  3. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  4. Jquery+Ajax+php学习笔记

    昨天研究ajax,想作个登陆框,无刷新就把用户名密码提交给后台php程序,验证后发回. 几经琢磨 总算出来前台代码: <script src="./javascript/jquery- ...

  5. jquery.ajax异步发送请求的简单测试

    使用ajax异步发送请求到一般处理程序,判断输入的用户名和密码 1.添加Html页面,导入jquery 2.编写js代码和页面标签 <script type="text/javascr ...

  6. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  7. jQuery+Ajax+PHP实现异步分页数据显示

    这几天做毕业设计的时候需要使用到一个异步分页的功能,即翻页的时候只是刷新分页的数据而不是刷新整个页面.因为之前做项目的时候没有做过这方面的功能,所以还是纠结了挺长时间的,在网上也找了很多资料,结合自己 ...

  8. jquery ajax跨域请求后台的简单例子

    一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...

  9. JQuery ajax 异步传一个数组到 .net后台

    可能使用JQuery Ajax传值到后台一个字符串,或者序列化后的表单大家都使用过,但是某些项目,需要我们一次传值一个数组到后台,这个时候有什么好的办法呢? 1.JS将数组转换为一个字符串,然后传值到 ...

随机推荐

  1. Excel中使用VBA进行度分秒与十进制度的转换

    发现Excel的VBA功能真是批量处理的一把利刃,工作中小试牛刀了一把,将Excel中度分秒形式的坐标批量处理成十进制度形式,处理完后用于GIS展点制图. 原Excel数据如下: VBA代码如下: S ...

  2. 项目笔记---事半功倍之GhostDoc(二)

    前言 前一篇文章<项目笔记---事半功倍之StyleCop(一)>提到如何约束代码,规范代码风格,这一节,我们将了解如何快速生成符合规则的代码注释---GhostDoc 一.安装Ghost ...

  3. DevExpress WinForms Controls 学习系列1

    一个偶然的机会,接触到DevExpress.项目是WinForm的,应用了DevExpress.为了使项目具备维护开发的生命力,我觉得有必要系统的学习一下DevExpress,今天是学习笔记的第一篇. ...

  4. ovs 源mac， 目的src 互换

    push:NXM_OF_ETH_SRC[],push:NXM_OF_ETH_DST[],pop:NXM_OF_ETH_SRC[],pop:NXM_OF_ETH_DST[] 1:把src mac推到栈顶 ...

  5. jzoj4424

    20%:暴力枚舉每一條邊有沒有被選到,然後使用并查集判斷聯通性 這樣子有20分,但是我考試寫掛了所以1分也沒有 100%:這道題2000的數據範圍,使用指數級搜索會tle,需要更加好的方法 這道題中, ...

  6. Flask从入门到精通之Flask表单渲染成HTML

    表单字段是可调用的,在模板中调用后会渲染成HTML.假设视图函数把一个NameForm 实例通过参数form 传入模板,在模板中可以生成一个简单的表单,如下所示: <form method=&q ...

  7. linux下oracle数据库字符集修改

    linux下oracle数据库字符集修改 0.RHEL6.7.oracle11gr2 1.登录oracle.在安装oracle的用户下进入数据库. $ sqlplus / as sysdba 2.查询 ...

  8. day 66 crm(3) 自创组件stark界面展示数据

    前情提要:  接着上一节的.stark自创组件的展示效果编写 展示数据 一:按照默认自带数据展示 即无一对一,一对多 1:先获取queryset对象 2:获取当前操作模型表对象数据 注意:list_d ...

  9. 错误处理Cannot load JDBC driver class 'oracle.jdbc.drive

    org.apache.tomcat.dbcp.dbcp.SQLNestedException: Cannot create PoolableConnec是由于<Resource name=&qu ...

  10. 彻底弄懂css3的flex弹性盒模型

    由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...