利用ajax实现简单的注册验证局部刷新实例

1,ajax(asynchronouse javascript and xml)异步的 javascrip 和xml
2,（包含了7种技术：javascript xml xstl dom xhtml css xmlhttpRequest）
3,是一种与服务器语言无关的技术，可以用在（php/jsp/asp.net）
4,ajax的工作原理： 创建一个ajax引擎->发送数据给服务器--》通过回调函数接收数据---》将数据赋给指定的页面

下面是注册验证案例register。php是注册页面。registerProcess.php用于接收数据并返回数据

register.php


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户注册</title>
<!-- 告诉浏览器不要缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
<!--
function sendRequest(){
//创建一个ajax引擎
var xmlHttpRequest;
//不同浏览器获取xmlRequest对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest = new ActiveXObject("MMMMMictofrt");
}else{
xmlHttpRequest = new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest
function checkName(){
myXmlHttpRequest = sendRequest();
if(myXmlHttpRequest){
//window.alert("创建成功");
//第一个参数表示请求方式get.post。第二个参数指定url,对哪个页面发送ajax请求
//用get方式提交的数据如果没有发生变化的话浏览器将会从缓存中直接提取
var url = "/ajax_yhyz/registerProcess.php? username=getValue('username').value";
//1,用这样就可以不从缓存提取了
//var url = "/ajax_yhyz/registerProcess.php? mytime='new Date()' & username=getValue('username').value";
//2,<meta http-equiv="pragma" content="no-cache">告诉浏览器不要缓存
//window.alert(url); 用于测试url是否成功
//第三个参数ture 表示异步机制
myXmlHttpRequest.open("get",url,true);
//指定回调函数，chul是函数名，表示如果状态发生变化就调用该函数，有四个状态
myXmlHttpRequest.onreadystatechange = chuli;
//发送请求，如果是get请求则填写null即可
//额如果是post请求，则填写实际的数据
myXmlHttpRequest.send(null);
}
}
function chuli(){
//window.alert("处理函数被回调");
if(myXmlHttpRequest.readyState == 4){
//window.alert("服务器返回"+myXmlHttpRequest.responseText);
getValue("myres").value = myXmlHttpRequest.responseText;
}
}
function getValue(id){
//return document.getElementById(id).value; 这样做的话没办法完成局部刷新
return document.getElementById(id);
}
-->

</script>
</head>

<body>
<form action="???" method="post">
用户名字:<input type="text" name="username1" id="username" ><input type="button" onclick="checkName()" value="验证用户名">
<input type="text" id="myres" />
<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
<form action="???" method="post">
用户名字:<input type="text" name="username2" >

<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
</body>
</html>

regiseterProcess.php


代码如下:

<?php
$username=$_REQUEST['username'];
if($username=="shunping"){
echo "err";
}else{
echo "ok";
}
?>

赞 (0)

相关推荐

  • JQuery的Ajax请求实现局部刷新的简单实例

    JQuery的Ajax请求实现局部刷新的简单实例

    请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个JQuery的数组对象,在被调用的action中涉及到的数据变量会对象,都会封装到data中最终返回给页面. 案例:如图 我要实现状态的更改,用JQuery的Ajax更改完之后图标发生改变,实现页面的局部刷新 原理:局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库重新做查询,二是后台数显数据修改之后,前台直接改

  • jquery ajax 局部刷新小案例

    复制代码 代码如下: <html><head><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript"> function getOtherMessage(){ $.ajax({ type:"post", url:"${pageConte

  • Ajax异步无刷新对局部数据更新

    复制代码 代码如下: <asp:ScriptManager ID="smScriptManager" runat="server"></asp:ScriptManager> 复制代码 代码如下: <asp:UpdatePanel ID="upLinkmanList" UpdateMode="Conditional" runat="server"><ContentTe

  • 纯JS实现AJAX局部刷新功能

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 下面给大家介绍JS实现AJAX局部刷新功能,具体内容如下所示: 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. //

  • jQuery ajaxSubmit 实现ajax提交表单局部刷新

    AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域

  • jQuery实现AJAX定时刷新局部页面实例

    方法一: 局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了. 例子,定时局部刷新 定时局部刷新用到jQuery里面的setInterval方法,setInterval方法两个参数,第一个是设置定时执行的函数名,第二个是时间,如下代码所示,设置每隔10微秒定时执行一次aa方法. <script> $(function(){ setInterval(aa,10); func

  • 使用ajax局部刷新gridview进行数据绑定示例

    具体代码如下: 复制代码 代码如下: <% @ Page Language = " C# " %> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < script runat ="server" &

  • jquery ajax 局部无刷新更新数据的实现案例

    要更新的页面 复制代码 代码如下: <!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"><head>    <title>&l

  • ajax局部刷新一个div下jsp内容的方法

    用AJAX刷新一个DIV中的jsp内容 复制代码 代码如下: <script type="text/javascript"> var xmlhttp; function startrefresh(){ xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST,"ss.jsp",true); xmlhttp.setRequestHeader("Content-type","ap

  • 利用ajax实现简单的注册验证局部刷新实例

    1,ajax(asynchronouse javascript and xml)异步的 javascrip 和xml 2,(包含了7种技术:javascript xml xstl dom xhtml css xmlhttpRequest) 3,是一种与服务器语言无关的技术,可以用在(php/jsp/asp.net) 4,ajax的工作原理: 创建一个ajax引擎->发送数据给服务器-->通过回调函数接收数据--->将数据赋给指定的页面 下面是注册验证案例register.php是注册页面

  • AJAX实现简单的注册页面异步请求实例代码

    AJAX实现简单的注册页面异步请求实例代码

    AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. (4)传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面.  简单布局 JS先判断,把前端可以的判断做,减少服务器的交互 $('button').on('click',function(){; var boolu

  • Struts2.5 利用Ajax将json数据传值到JSP的实例

    AJAX +JSON=>JSP AJAX  AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规

  • 使用Ajax实现简单的带百分比进度条实例

    使用Ajax实现简单的带百分比进度条实例

    需求:当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验 实现步骤 JSP页面 1.添加table标签 <table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" borderco

  • ajax局部刷新实例 (三种方法推荐)

    ajax局部刷新 <script> setInterval("refreshTime()",1000); //每格1秒刷新一次 funciton refreshTime() { var dateObj = new Date(); time.innerHTML = dateObj.toLocaleDateString(); //刷新div里面的内容 } </script> <div id=time> </div> function doRe

  • Flutter StreamBuilder实现局部刷新实例详解

    Flutter StreamBuilder实现局部刷新实例详解

    目录 前言 StreamBuilder 简介 StreamBuilder的实际应用 总结 前言 在flutter项目中,页面内直接调用setState方法会使得页面重新执行build方法,导致内部组件被全量刷新,造成不必要的性能消耗.出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新的操作. 包括Provider.ValueNotifier和StatefulBuilder等在内的技术方案,都能够帮助我们实现Flutter局部刷新的需求.有兴趣了解StatefulBuild

  • Flutter StatefulBuilder实现局部刷新实例详解

    Flutter StatefulBuilder实现局部刷新实例详解

    目录 前言 页面的全量刷新 StatefulBuilder简介 StatefulBuilder的实际应用 总结 前言 flutter项目中,在页面数据较多的情况下使用全量刷新对性能消耗较大且容易出现短暂白屏的现象,出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新操作. GlobalKey.ValueNotifier和StreamBuilder等技术方案都可以实现Flutter页面的局部刷新,本文主要记录的是通过StatefulBuilder组件来实现局部刷新的方法. 页

  • 利用Ajax检测用户名是否被占用的完整实例

    适合人群:Ajax和jQuery入门 采用Ajax实现用户名验证 使用jQuery给出提示信息 用户注册的时候,使用Ajax实现检测用户名是否已经被注册过,很多细节没有实现,给大家做个简单普及. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//

  • JS实现的简单表单验证功能完整实例

    JS实现的简单表单验证功能完整实例

    本文实例讲述了JS实现的简单表单验证功能.分享给大家供大家参考,具体如下: <!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"> <head&

  • AJAX+JAVA用户登陆注册验证的实现代码

    需求 通过ajax异步刷新页面验证用户输入的账号密码是否在数据库中存在. 技术栈 JSP+Servlet+Oracle 具体代码 JSP部分: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit

随机推荐