<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>ajax</title> <script src="/ajax/js/jquery-3.3.1.min.js"></script> </head> <body> <form action="http://www.ubfgho.com/" method="post"> 姓名：<input type="text" name="name"><span></span><br> 密码：<input type="password" name="psw"><br> <input type="submit" value="提交"><br> </form> </body> <script> /*前端form表单提交的是整个页面，进入servlet，利用Jquery实现前台验证，做非空验证 利用Ajax实现异步请求，不需要跳转页面，判断姓名是否重名： 1、创建发送异步请求的对象req 2、准备发送：请求方式get、post 路径url 是否为异步true 3、执行发送 */ //js实现get方式的异步请求: //发送 $(‘:text‘).blur(function () { var name1=$(this).val().trim()//获取参数与name1 var req=new XMLHttpRequest();//创建发送异步请求的req req.open("GET","/ajax/login?name="+name1,true)//准备发送 req.send() //接收：发送不可能马上接受，这里需要设置状态时机成熟才去接收服务器的响应文本 /* readyState: * 0表示请求未初始化 * 1服务器已建立连接 * 2请求已接收 * 3请求处理中 * 4请求已完成，且响应就绪 * status：200表示OK 404表示未找到页面 * */ req.onreadystatechange=function () { if (req.readyState==4&&req.status==200){ //req.responseText;//response接收后台响应的text $(‘span‘).html(req.responseText)//赋值给span标签
} } })
//1、失去焦点事件--判断姓名是否为空 $(‘:text‘).blur(function () { var v=$(this).val() if (v.trim()==""){ $("span").html("姓名为空").css("color","red") }else{ $("span").html("")//清空span } }) //2、提交事件---点击提交按钮触发submit $("form").submit(function () { //选中text文本 var v=$(‘:text‘).val().trim(); if (v==""){ //如果姓名为空。就返回false，阻止提交， return false } })
</script></html>
原文地址：https://www.cnblogs.com/xiaoshenke/p/10996894.html
时间： 2024-11-08 20:58:09