AJAX实例1--数据检验

最新推荐文章于 2021-08-05 12:21:04 发布
原创 最新推荐文章于 2021-08-05 12:21:04 发布 · 911 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #xmlhttprequest #encoding #function #mozilla #input

本文介绍了一种使用AJAX技术实现的用户界面唯一性检查方法。通过客户端JavaScript与服务器端PHP交互，验证输入的用户名是否已被占用。文章提供了完整的HTML、JavaScript及PHP示例代码。

/************************************************** 
*Author:Java619 
*Time:2006-5   
**************************************************/

1.用户界面

sample1_1.html代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>唯一性检查</title>
<script language="javascript">
    var http_request = false;
    function send_request(url,str) {//初始化、指定处理函数、发送请求的函数
        http_request = false;
        //开始初始化XMLHttpRequest对象
        if(window.XMLHttpRequest) { //Mozilla 浏览器
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {//设置MiME类别
                http_request.overrideMimeType('text/xml');
            }
        }
        else if (window.ActiveXObject) { // IE浏览器
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!http_request) { // 异常，创建对象实例失败
            window.alert("不能创建XMLHttpRequest对象实例.");
            return false;
        }
        var queryString = encodeURIComponent("username") + "=" + 
                encodeURIComponent(str);
        http_request.onreadystatechange = processRequest;
        // 确定发送请求的方式和URL以及是否同步执行下段代码
        var contentType = "application/x-www-form-urlencoded; charset=utf-8";
        // 确定发送请求的方式和URL以及是否同步执行下段代码
        http_request.open("post", url, true);
        http_request.setRequestHeader("Content-Type", contentType);
        http_request.send(queryString);
    }
    // 处理返回信息的函数
    function processRequest() {
        if (http_request.readyState == 4) { // 判断对象状态
            if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
                alert(http_request.responseText);
            } else { //页面不正常
                alert("您所请求的页面有异常。");
            }
        }
    }
    function userCheck() {
        var f = document.form1;
        var username = f.username.value;
        if(username=="") {
            window.alert("用户名不能为空。");
            f.username.focus();
            return false;
        }
        else {
            send_request('sample1_2.php',username);
        }
    }
</script>
</head>

<body>
<br>
<TABLE align="center" style="border:1px solid blue;">
<TR>
    <TD valign="middle"><br>
    <form name="form1" action="" method="post">
用户名：<input type="text" name="username" value="">&nbsp;
<input type="button" name="check" value="唯一性检查" onClick="userCheck()">
<input type="submit" name="submit" value="提交">
</form>
    </TD>
</TR>
</TABLE>


</body>
</html>

 2.后台处理代码

sample1_2.php

 

<?php
//利用mb_convert_encoding 函数处理中文问题
$username=mb_convert_encoding(urldecode(@$HTTP_POST_VARS["username"]),"gb2312", "utf-8");
if($username=="张三") echo mb_convert_encoding("该用户名已经被人使用,请选择其他!","utf-8", "gb2312");
else echo mb_convert_encoding("该用户名可用","utf-8", "gb2312");
?>

3.运行

AJAX--异步校验实现
吴晓如
02-07 5869
前言：      现在软件很讲究用户体验度，当我们在注册的时候，你是希望当你填完一系列信息之后点击注册时系统提示你用户名已经注册过，然后重新填写一遍信息，还是当你填完用户名就给提示？？懒人都会选择后者对吧，来看看怎么实现的！ 介绍：     这个效果的实现用到了AJAX，当用户离开用户名文本框输入时开始校验，需要在用户名标签中添加onblur事件，如下图： 接下来就
jquery的ajax异步请求接收返回json数据实例
12-03
在JavaScript的世界中，jQuery库极大地简化了与服务器端交互的过程，特别是对于异步请求（Ajax）和处理返回的JSON数据。本篇文章将深入探讨如何使用jQuery的`$.ajax`方法来实现异步请求并接收JSON数据。 首先，JSON...
Ajax校验
select_up的博客
03-15 390
Ajax实现局部校验：注册用户时，保证用户名不重复，为了保证实现功能需要在不提交表单的情况下，实现局部校验前台代码为: 姓名：&lt;input type="text" name="username" id="username" /&gt; &lt;span id="ref"&gt;&lt;/span&gt;实现用户名输入文本框在前台校验时 ，&lt;%@taglib p
ajax检测用户名
CategorySession的专栏
12-15 563
-- ---------------------------- -- Table structure for `ajax` -- ---------------------------- DROP TABLE IF EXISTS `ajax`; CREATE TABLE `ajax` (   `id` int(11) NOT NULL AUTO_INCREMENT,   `name`
AJAX检验用户是否存在
youngerhao的专栏
09-27 595
在做网站的时候免不了要写注册页面，要验证用户名在数据库中是否已经存在，昨天用ajax实现异步验证用户名是否存在，今天在这里与大家分享一下，有不足的请提出建议，我一定及时改正，代码如下： 用户注册 function checkUser
ajax--检验用户是否存在
小时
08-23 376
ValiateUserNameServlet package com.yucheng.ajax.servlets; import java.io.IOException; import java.lang.ProcessBuilder.Redirect; import java.util.Arrays; import java.util.List; import javax.servle
HTML+CSS+JS数据可视化大屏平台模板实例22-echarts可视化通用模板
03-25
JavaScript的Ajax技术或者fetch API可以实现异步请求，获取并更新数据。 6. 响应式设计：为了适应不同尺寸的显示设备，大屏模板通常需要采用响应式布局。CSS3的媒体查询（Media Queries）可以检测设备特性，根据...
php-ajax-using-json
02-18
5. **前端处理响应**：JavaScript检测到状态变化，读取响应数据，解析JSON字符串为JavaScript对象，然后根据需要更新DOM，改变页面显示。 标签 "Hack" 可能指的是在学习或应用这些技术时可能遇到的问题或技巧。在...
Ajax-Ajax基础实例
11-04
**Ajax基础实例详解** AJAX，全称"Asynchronous JavaScript and XML"，是一种使用JavaScript技术实现异步通信，更新网页局部内容的技术，无需刷新整个页面...通过实践基础的AJAX实例，可以更好地理解和运用这一技术。
PHP实例开发源码-php东方数据文学网站程序.zip
10-15
此实例对于初学者而言是一次宝贵的实践机会，对于有经验的开发者来说，也是一个检验和提升技能的平台。 文件名“132699565282914331”可能是项目中的某个具体文件，但因为缺少详细信息，无法进一步解读其具体内容。...
Ajax 检验用户唯一性
cxzhq2002的杂记
06-22 1335
//vu.htmvalidator userhttp://www.w3.org/1999/xhtml" >var http_request=false;function send_request(method,url){http_request=false;// inital HttpRequestif(window.XMLHttpRequest){//Mozillahttp_request
ajax实现注册检验
04-01 396
login.jsp <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> My JSP 'login2.j
Ajax异步校验
马晓璐 技术与杂谈
01-03 2283
Ajax（Asynchronous Javascript And XML）构建网页的一种综合使用JavaScript和XML的技术,HTML网页的异步传输技术：在等待网页的传输过程中，用户依然可以和系统进行交互，页面不用刷新就可以更新内容，合理的运用可以让用户感觉更好更方便。 不用Ajax时，浏览器request请求，发送到tomcat服务器上面，然后tomcat生成html页面再返回到
ajax同步检验用户名(简单的数据检测)
qq_38235017的博客
10-28 358
ajax简介：  简单的实现界面： 代码实现： 1、创建MVC项目 2、Models下创建一个类文件（Major.cs）  Major.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace checkuser.Models {...
Ajax校验用户名
扮猪吃老虎二号的博客
02-27 366
一、Ajax介绍 1.1 是什么 “Asynchronous Javascript And XML”（异步JavaScript和XML） 并不是新的技术，只是把原有的技术，整合到一起而已。  使用CSS和XHTML来表示  使用DOM模型来交互和动态显示  使用XMLHttpRequest来和服务器进行异步通信  使用javascript来绑定和调用 1.2 有什么用 咱们的网页如...
Ajax 验证用户名唯一性数据校验
热门推荐
ruxing.li 的专栏
01-21 2万+
注：本文中使用到的一些类库在前面文章都能找到源代码，我会在文中指明链接所在，为了缩短文章篇幅，由此带来的阅读不便，敬请谅解。 本文要说明的是如何使用 Ajax 验证用户名是否被注册。当您注册某网站的时候，输入用户名，鼠标光标一离开，就会提示，您的用户名是否被注册，本文将为您展现程序流程。 首先，我们得先需要一个表单页面 index.html，代码清单如下： index.html
spring下调用ajax进行异步检验，后台程序调试一致成功，但是返回前台就是不执行success
builderwfy的专栏
03-15 2153
今天调用ajax进行异步检验一直不成功，后来发现由于我用的是json类型，但是在spring中注释中少了 @ResponseBody 开始错误少了@ResponseBody，执行时都是不执行ajax中success回调函数，经过查文档发现 @responsebody表示该方法的返回结果直接写入HTTP response body中 一般在异步获取数据时使用，在使用@RequestMappin
使用ajax异步校验数据的两种方法
只有变秃 才能变强
06-07 2336
使用ajax异步校验数据的两种方法 两种方法: 使用js 使用jquery 一使用js <script type="text/javascript"> //ajax异步校验 function checkUsername() { // 获得文件框值: var username = document.getElementById("us
如何检测ajax完成且是成功的,如何检测几个AJAX请求已完成或失败？
weixin_36352023的博客
08-05 1048
我有一个应用程序在第一次运行时加载多个资源，这些资源存储在localStorage中。我有一个函数，检查是否所有的本地存储变量设置，以便该部分工作正常。如何检测几个AJAX请求已完成或失败？我的工作的方法是这样的：显示加载消息。初始化AJAX请求。启动计时器间隔以检查是否所有内容都已加载。当数据加载时，初始化应用程序等。如果数据未加载，则显示错误消息。问题是＃5 - 如何检测是否有错误？例如，如果...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值