Ajax具体使用
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具体使用的更多相关文章
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
- 一个粗心的Bug,JSON格式不规范导致AJAX错误
一.事件回放 今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...
- ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
- 调用AJAX做登陆和注册
先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...
- Ajax 概念 分析 举例
Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...
- ajax
常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...
- 学习笔记之MVC级联及Ajax操作
由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...
- javascript表单的Ajax 提交插件的使用
Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...
随机推荐
- datasnap的前世今生
随着XE6,XE7,以及半年以后即将发布的XE8,DATASNAP将顺应跨平台的需要, 有可能的情况是这样的:XE8,DATASNAP写的中间件将可以运行在LINUX服务器上面. 大家都知道COM是W ...
- VB.NET开发中遇到的一点小问题
在用vb.net开发的security support时,遇到一个问题,在trainingCourses.aspx页面上增加了一个HyperLink控件 <asp:HyperLink runat ...
- hibernate和mybatis
本来是个菜鸟程序员,现在大学还没毕业. 最近一直在想一个问题,到底是hibernate好还是mybatis好.我总觉得 hibernate好用之极,在大学里做过的小项目都是用的hibernate,只要 ...
- 部署 instance 到 OVS flat network - 每天5分钟玩转 OpenStack(135)
上一节创建了 OVS flat network,今天我们部署 instance 并验证 flat 网络的连通性. launch 新的 instance "cirros-vm1",网 ...
- 使用PUT方法上传文件无法工作原因分析
现象 在Spring Framework中,使用HTTP的PUT方法上传文件时,在服务器端发现Multipart参数为空. 原因 Spring中的StandardServletMultipartRes ...
- 认识JavaScript的原型
本来打算也写一个JavaScript学习笔记的系列,不过由于笔者不太想买大部头的js数据,和网上的资料也不少,所以js系列就打算写到了算了了. 要理解JavaScript就要理解其原型,首先我们先区分 ...
- 山东理工大学ACM平台题答案关于C语言 1580 闰年
闰年 Time Limit: 1000ms Memory limit: 32768K 有疑问?点这里^_^ 题目描述 时间过得真快啊,又要过年了,同时,我们的人生也增长了一年的阅历,又成熟了一些 ...
- android开发教程(八)——环境搭建之java-ndk
目录 android ndk是android用于开发本地代码的开发工具包.它提供C/C++交叉编译工具.android内核.驱动.已有的C/C++代码,都需要ndk来支持开发. 目前支持以下平台:ar ...
- Python中的基本语句
本文简单的介绍下Python的几个基本语句. print语句 print可同时打印多个表达式,只要将他们用逗号隔开. >>> name='Gumy' >>> gre ...
- HTML5 - HTML5 postMessage API 注意事项
一:发送 window.postMessage("Hello, world", "http://127.0.0.1:8080"); 注意,必须要加上http:/ ...