jQuery+Ajax+PHP 制作简单的异步数据传输(测试用户名是否可用)
实现基本异步数据传输,略去与数据库交换,先直接在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 制作简单的异步数据传输(测试用户名是否可用)的更多相关文章
- jquery 和 FormData 最简单图片异步上传
<script src="/scripts/jquery/jquery-3.1.1.min.js"></script> <script type=&q ...
- 使用 jQuery Ajax 异步登录,并验证用户输入信息(maven)
使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...
- Jquery Ajax简单封装(集中错误、请求loading处理)
Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
- Jquery+Ajax+php学习笔记
昨天研究ajax,想作个登陆框,无刷新就把用户名密码提交给后台php程序,验证后发回. 几经琢磨 总算出来前台代码: <script src="./javascript/jquery- ...
- jquery.ajax异步发送请求的简单测试
使用ajax异步发送请求到一般处理程序,判断输入的用户名和密码 1.添加Html页面,导入jquery 2.编写js代码和页面标签 <script type="text/javascr ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- jQuery+Ajax+PHP实现异步分页数据显示
这几天做毕业设计的时候需要使用到一个异步分页的功能,即翻页的时候只是刷新分页的数据而不是刷新整个页面.因为之前做项目的时候没有做过这方面的功能,所以还是纠结了挺长时间的,在网上也找了很多资料,结合自己 ...
- jquery ajax跨域请求后台的简单例子
一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...
- JQuery ajax 异步传一个数组到 .net后台
可能使用JQuery Ajax传值到后台一个字符串,或者序列化后的表单大家都使用过,但是某些项目,需要我们一次传值一个数组到后台,这个时候有什么好的办法呢? 1.JS将数组转换为一个字符串,然后传值到 ...
随机推荐
- KNN PCA LDA
http://blog.csdn.net/scyscyao/article/details/5987581 这学期选了门模式识别的课.发现最常见的一种情况就是,书上写的老师ppt上写的都看不懂,然后绕 ...
- oauth入门
oauth可以支持跨网站的数据传输.假设一个用户把照片上传到faji网站,然后想登录到beppa网站(照片打印),把faji的上照片打印出来. 她当然可以自己把照片取下来再上传上去,不过比较麻烦. 使 ...
- Django:model.save()的时候在干什么
转:https://www.cnblogs.com/zywscq/p/5397439.html Model.save(force_insert=False, force_update=False, u ...
- 程序猿CET4和CET6考试攻略
写在前面: 学习一种语言是一个长期的过程,而且需要合适的语言环境,不是一朝一夕可以熟练掌握的,但是如果单纯地只是为了通过考试的话,就另当别论了 声明:本篇攻略纯属经验之谈,绝非任何性质的广告,仅供参考 ...
- [ASP.NET]NTKO插件使用常见问题
一.环境要求 NTKO OFFICE文档控件能够在IE.谷歌Chrome.Firefox等浏览器中直接编辑MS Office.WPS.金山电子表.永中Office等文档并保存到WEB服务器.(标准版对 ...
- signalR常见问题
一.安装signalR会对应安装自己的NewJson包,如果引用了含有不同NewJson包的dll组件,会造成版本不一致.必须在运行环境中指出使用目标版本. 问题截图: 解决方式: <runti ...
- 【cocos2d-x 手游研发小技巧(1)自定义制作怪物伤害数值】
直插主题了,今天写了一下午,早就想要写这类似东西的,首先我不会选用CCLabelAtlas了,我直接用帧图片做. 首先我们要准备素材,我先把素材帖出来给大家: 这个是一张比较全的素材图,它包含了扣血的 ...
- windows下MySQL的安装(非安装包)
命令代码 "C:\Program Files\MySQL\MySQL Server 5.6\bin\mysqld.exe" --install MySQL56_3308 --def ...
- Depth-first Search-690. Employee Importance
You are given a data structure of employee information, which includes the employee's unique id, his ...
- 【JS深入学习】——事件代理/事件委托
事件代理/事件委托(event delegation) 需求一:当一个div内部有多个事件发生,给每个元素逐个添加事件十分麻烦... 需求二:在项目中我们常常需要动态的添加元素,不可避免的需要为那些未 ...