ajax技术前后台（mvc）

最新推荐文章于 2025-08-13 22:02:33 发布

RT_0114

最新推荐文章于 2025-08-13 22:02:33 发布

阅读量451

点赞数

CC 4.0 BY-SA版权

文章标签： ajax javascript

本文链接：https://blog.youkuaiyun.com/Smy_0114/article/details/53817531

jquery 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个简单的姓名验证功能实现过程，包括前端HTML表单输入、JavaScript动态验证及后端控制器处理逻辑。通过Ajax进行前后端交互，实现对输入姓名的实时检查。

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

html

<div class="form-group required">
	<label class="col-sm-2 control-label">姓名：</label>
	<div class="col-sm-6">
	<form:input id="name" path="name" htmlEscape="false" maxlength="100" 
		class="form-control required" readonly=""onchange="change(this.value)" />
	</div>
	<span id = "msg"></span>
	</div>

javascript

function change(name){
	if(name != null && name != ""){
		alert("调用方法！");
			checkname(name);
			}
		}
		function checkname(name){
			$.ajax({
				url:"${ctx}/*****/*****/*****",
				type:"post",
				dataType:"JSON",
				data:{name:name},
				success:function(result){
					//已经存在该姓名
					if(result == true){
// 						alert("result:"+result);
						$("#msg").html("该账号已经存在！");
						
					}else{
// 						alert("result:"+result);
						
						$("#msg").html("可以使用");
					}
				},
				error:function(){
					alert("name:"+name);
					alertx("检查输入是否发生错误。");
				}
			})
		}

controller

@RequestMapping(value = "*****")
	public String ifnow(User user,HttpServletResponse response) {
		List<User> list = UserService.findNameRepeat(User);
		if(list.size()>0){
			log.info("已经存在！");
			return stringpage(response, "false", "");
		}else{
			log.info("可以使用！");
			return stringpage(response, "true", "");
		}	
	}

common

protected String stringpage(HttpServletResponse response, String string, String type) {
		try {
			response.reset();
	        response.setContentType(type);
	        response.setCharacterEncoding("utf-8");
			response.getWriter().print(string);
			return null;
		} catch (IOException e) {
			return null;
		}
	}

时间仓促，整理一下，方便以后查看使用，其中还有不少误区，但基本通讯实现了，请在此基础上修改即可，
有好的建议可以留言一起讨论！