使用ajax异步校验数据的两种方法

Bertha 。 2022-06-14 02:37 137阅读 0赞

> 使用ajax异步校验数据的两种方法

两种方法:

> 使用js
> 
> 使用jquery

## 一使用js ##

<script type="text/javascript"> //ajax异步校验 function checkUsername() { // 获得文件框值: var username = document.getElementById("username").value; // 1.创建异步交互对象 var xhr = createXmlHttp(); // 2.设置监听 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { document.getElementById("span1").innerHTML = xhr.responseText; } } } // 3.打开连接 xhr.open("GET", "${pageContext.request.contextPath}/customerAction_findByName.action?time=" + new Date().getTime() + "&username=" + username, true); // 4.发送 xhr.send(null); } function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try { // Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } //客户端校验 function checkForm() { $("#span1").text(""); $("#span2").text(""); $("#span3").text(""); $("#span4").text(""); var username = $("#username").val(); if (username = null || username == "") { $("#span1").text("用户名不能为空,傻吊"); return false; } else { } var password = $("#password").val(); var rePassword = $("#rePassword").val(); if (password = null || password == "") { $("#span2").text("密码不能为空哦,傻吊"); return false; } var password = $("#password").val(); if (password.length < 6) { $("#span2").text("密码不能小于6位,傻吊"); return false; } var password = $("#password").val(); var rePassword = $("#rePassword").val(); if (password !== rePassword) { $("#span3").text("密码不一致,傻吊"); return false; } var email = $("#email").val(); if (email = null || email == "") { $("#span4").text("邮箱不能为空哦,傻吊"); return false; } var re = /\w+@\w+\.\w+/g; var email = $("#email").val(); if (!re.test(email)) { $("#span4").text("邮箱格式不正确,傻吊"); return false; } } </script>

## 二使用jquery ##

<script> //ajax异步校验 function checkEmail() { var email = $("#email").val(); $.get("customerAction_findByEmail.action?email="+email+"&"+ new Date().getTime() ,function(data,status){ if(status=="success"){ document.getElementById("span4").innerHTML = data; } }); } </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关 AJAX异步请求数据

文章目录前言一、AJAX是什么？二、使用步骤 1.语法格式 2.示例 2.注意事项总结 ----

ゞ浴缸里的玫瑰/ 2024年04月07日 13:08/ 0 赞/ 102 阅读

相关 webform使用ajax访问后端接口的两种方法

第一种方法：ajax前后端交互，前端使用这种传参方式：JSON.stringify(\{obj:JSON.stringify(json\_obj)\})，而后端使用这种接参方式

左手的ㄟ右手/ 2024年02月17日 11:44/ 0 赞/ 31 阅读

相关 Ajax异步请求的方法

> //1.创建XMLHTTPREUQEST对象 > var req=new XMLHttpRequest(); > //2.准备发送请求的数据（请求方式，请求地址）

我会带着你远行/ 2023年10月09日 21:43/ 0 赞/ 66 阅读

相关 AJAX用户名异步校验

<tr> <th><span class="requiredField"></span>用户名:</th> <td><input type=

水深无声/ 2022年06月14日 11:09/ 0 赞/ 224 阅读

相关使用ajax异步校验数据的两种方法

> 使用ajax异步校验数据的两种方法两种方法: > 使用js > > 使用jquery 一使用js <script type="text/javasc

Bertha 。/ 2022年06月14日 02:37/ 0 赞/ 138 阅读

相关 jquery ajax异步提交表单数据的方法

原文地址：[https://www.cnblogs.com/zhaoyingjie/p/8503154.html][https_www.cnblogs.com_zhaoying

Myth丶恋晨/ 2022年05月13日 01:04/ 0 赞/ 267 阅读

相关 ajax的两种写法

一、原生ajax的实现 1.什么是ajax？ ajax是异步的javas和xml（ Asynchronous JavaScript And XML）。通过在后台与服务器

古城微笑少年丶/ 2022年03月27日 05:37/ 0 赞/ 378 阅读

相关 Jq表单校验异步ajax校验用户是否存在

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc

比眉伴天荒/ 2022年02月01日 08:47/ 0 赞/ 249 阅读

相关 Ajax异步处理数据的简介与使用

一、概念 1、Ajax： Asynchronous JavaScript and XML，异步JavaScript和XML 2、用途：用于前后端通信，通过在后台与服务器

客官°小女子只卖身不卖艺/ 2021年09月28日 00:28/ 0 赞/ 347 阅读

相关 Web--使用Ajax与Hibernate完成表单异步校验

前端页面： <%@ page language="java" contentType="text/html; charset=utf-8" pag

绝地灬酷狼/ 2021年08月13日 19:32/ 0 赞/ 378 阅读