Ajax在注册页面经常使用,当注册用户是用户名必须唯一时,要使用ajax获取表单中你输入的内容,
然后将这个数据利用XMLHttpRequest对象请求一个php文件,这个php文件接收到信息,查询数据库,
判断是否有相同的用户名已经注册,把结果echo出来,前端页面不用发生跳转,用xhr对象的ResponseText
的属性获取php页面返回的值,进行相应的处理,将提示是否能够注册的语句显示在页面当中,实现Ajax功能
需要注意的是,send();方法是向php页面发送数据,参数就是数据,数据类型为"key1=value1$key2=value2..."
的形式,经常以GET,POST两种方式传输,在使用POST方式时,必须使用方法setRequestHeader('key','value');
设置头信息Content-Type: application/x-www-form-urlencoded,否则无法接收到信息

前端页面

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax的具体实现</title>
<script type="text/javascript">
//发送数据
function sen(){
var xhr=new XMLHttpRequest();
xhr.open('POST','./01.php',true);//异步传输 //获取表单中的内容
var oUser=document.getElementsByName('username')[0]; xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("username="+oUser.value); xhr.onreadystatechange=function(){
if(xhr.readyState==4){
document.getElementById('username').innerHTML=xhr.responseText;
}
} }
window.onload=function(){ } </script>
</head>
<body>
<form id="form" action="">
<p>用户名:<input type="text" name="username" /><span id="username"></span></p>
<p>密码:<input type="password" name="[pwd]"/><span id="pwd"></span></p>
<p><input type="button" onclick="sen();" value="注册"/></p>
</form>
</body>
</html>

php接收页面

<?php
//print_r($_POST);
if(isset($_POST['username'])){
if($_POST['username']=='admin'){
echo "不能注册";
}else{
echo '可以注册';
}
} ?>
当点击注册按钮时,才触发Ajax函数,然后发生以下效果

Ajax具体使用的更多相关文章

  1. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  3. 一个粗心的Bug,JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  4. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  5. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  6. 调用AJAX做登陆和注册

    先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

  7. Ajax 概念 分析 举例

    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

  8. ajax

    常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...

  9. 学习笔记之MVC级联及Ajax操作

    由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...

  10. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

随机推荐

  1. 精通Linux的“kill”命令

    无论你使用哪种操作系统,你一定会遇到某个行为失常的应用,它把自己锁死并拒绝关闭.在Linux(还有Mac),你可以用一个"kill"命令强制终结它.在这个教程中,我们将展示给你多种 ...

  2. Linux(Centos)全自动异地备份数据(WEB+Mysql)

    文章开始之前,先问下各位站长一个问题:什么东西对于站长是十分重要的?其实对于站长而言,很多东西都是很重要的.但我们现在排除外在因素,把范围缩小到网站系统本身,哪些是非常重要的呢?网站数据就是其中之一了 ...

  3. ASP.NET中身份验证的三种方法

    Asp.net的身份验证有有三种,分别是"Windows | Forms | Passport",其中又以Forms验证用的最多,也最灵活.Forms 验证方式对基于用户的验证授权 ...

  4. POJ 3169 Layout (spfa+差分约束)

    题目链接:http://poj.org/problem?id=3169 差分约束的解释:http://www.cnblogs.com/void/archive/2011/08/26/2153928.h ...

  5. HDU1856More is better(并查集)

    最近发现以前的东西都忘得差不多了,在这里刷刷水题 并查集: int find_parent(int x) { return x = p[x] ? x : p[x] = find_parent(p[x] ...

  6. UVaLive 7370 Classy (排序,比较)

    题意:给定 n 个人,和他们的数进行比较,从后面开始比,如果不够长,加middle接着比,直到没有,如果还相同比名字. 析:很水的题,就不用说了. 代码如下: #pragma comment(link ...

  7. 深入学习APC

    一.前言 在NT中,有两种类型的APCs:用户模式和内核模式.用户APCs运行在用户模式下目标线程当前上下文中,并且需要从目标线程得到许可来运行.特别是,用户模式的APCs需要目标线程处在alerta ...

  8. Unity中2D和UGUI图集的理解与使用

    图集 什么是图集? 在使用3D技术开发2D游戏或制作UI时(即使用GPU绘制),都会使用到图集,而使用CPU渲染的2D游戏和UI则不存在图集这个概念(比如Flash的原生显示列表),那么什么是图集呢? ...

  9. 在ASP.NET MVC中的四大筛选器(Filter)及验证实现

    http://www.cnblogs.com/artech/archive/2012/08/06/action-filter.html http://www.cnblogs.com/ghhlyy/ar ...

  10. HDU 4821 String hash

    String Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.action ...