ajax无刷新验证出现undefined怪异情况的解决方案

最新推荐文章于 2023-04-24 09:26:02 发布

ycr19921121

最新推荐文章于 2023-04-24 09:26:02 发布

阅读量763

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax

本文链接：https://blog.youkuaiyun.com/ycr19921121/article/details/51843070

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在前端实现用户名实时校验的方法，利用Ajax进行无刷新数据验证，并结合正则表达式确保输入格式正确。文章详细展示了如何通过设置同步请求、使用标记变量以及返回验证结果来完成这一过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在web开发中，常常会碰到ajax无刷新校验的情况，根据后台返回的值来判断前台判断是否通过，此时如果没有对$.ajax()的一些小细节进行操作，很容易出现许多怪异情况。

具体场景代码如下：

// 用户名的验证==========================
function doUsername() {
	var t = $("input[name=username]");
	var username = t.val();
	var span = t.next();
	//①定义一个标记
	var flag = false;
	if (/^\w{3,6}$/.test(username)) 
	{
		$.ajax({
			type : "POST",//请求方式  
			url : "user_checkUsername.action",
			async : false,
			cache : false,//必须设置为同步！！！
			dataType : "json",//数据类型text xml json  script  jsonp  
			data : {
				username : username
			},
			success : function(data) 
			{
				var status = data.hashMap1.status;
				if (status == "no") 
				{
					span.html("用户名已经存在了哦").css({
						color : "red",
						fontSize : "12px"
					});
					//②改变标记状态
					flag = false;
				}
				if (status == "ok") {
					span.html("填写正确").css({
						color : "green",
						fontSize : "12px"
					});
					//②改变标记状态
					flag = true;
				}
			}
		});
		//③只能在success后返回被更改的标记，否则将出现undefined等怪异情况！！！
		return flag;
	} else {
		span.html("包含数字、字母、下划线，长度在3-6之间").css({
			color : "red",
			fontSize : "12px"
		});
		return flag;
	}
}

怎么样，是否能够解决您的问题呢？~

by yanchenrong.