2020-10-07

    科技2024-01-06  99

    终于开始学ajax了!但是url就给我卡半天 我佛了,学ajax之前又学了一个小插件叫jquery validate,这是一款用于表单验证的插件,教程啥的就不放了,熟了就没写完代码直接放效果图上代码:

    代码:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/jquery-validation-1.19.2/lib/jquery.js"></script> <script src="../lib/jquery-validation-1.19.2/dist/jquery.validate.js"></script> </head> <script type="text/javascript"> $(function () { //自定义校验规则:写在validate前面 //$.validator.addMethod("自定义函数名",function(value,element,params){}) $.validator.addMethod("qqemail",function(value,element){ var a=/[]/; }) $("#form1").validate({ rules:{ truename:"required", username:{ required:true, rangelength:[5,8] }, password:{ required:true, rangelength:[6-10], equalTo:"#username" }, pass:{ required:true, rangelength:[6-10], }, gender:"required", age:{ required:true, range:[26,50], digits:true }, birthday:{ required:true }, email:{ required:true, email:true } }, messages:{ truename:"真实姓名不能为空", username:{ required: "用户名不能为空", rangelength:"长度要在5-8之间" }, password:{ required: "密码不能为空", rangelength:"长度要在6-10之间" }, pass:{ required: "请再次输入密码", rangelength:"长度要在6-10之间", equalTo:"密码不一致" }, gender:"必选其一", age:{ required:"年龄不能为空", range:"年龄要在56-50之间", digits:"年龄必须为数字" }, birthday:{ required:"请选择你的生日" }, email:{ required:"请输入邮箱", email:"请输入正确的邮箱" } } }); }); </script> <body> <form action="#" method="post" id="form1"> <table border="1" align="center" width="500"> <tr> <td><label for="truename">真实姓名</label></td> <td><input type="text" name="truename" id="truename"></td> </tr> <tr> <td><label for="username">用户名</label></td> <td><input type="text" name="username" id="username"></td> </tr> <tr> <td><label for="password">密码</label></td> <td><input type="password" name="password" id="password" ></td> </tr> <tr> <td><label for="pass">验证密码</label></td> <td><input type="password" name="password" id="pass" ></td> </tr> <tr> <td><label for="age">年龄</label></td> <td><input type="text" name="age" id="age" ></td> </tr> <tr> <td><label for="email">Email</label></td> <td><input type="email" name="email" id="email"></td> </tr> <tr> <td><label for="name">姓名</label></td> <td><input type="text" name="name" id="name"></td> </tr> <tr> <td><label for="tel">手机号</label></td> <td><input type="text" name="tel" id="tel"></td> </tr> <tr> <td><label>性别</label></td> <td><input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 <label for="gender" generated="true" class="error" style="'display:none;"></label> </td> </tr> <tr> <td><label for="birthday">出生日期</label></td> <td><input type="date" name="birthday" id="birthday"></td> </tr> <tr> <td><label for="checkcode">验证码</label></td> <td><input type="text" name="checkcode" id="checkcode"> <img src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="注册"></td> </tr> </table> </form> </body> </html>

    主要就是导入js文件后通过id找到form,在写个函数,name找表格,里面放rules 和message 一一对应 ,要自己写规则就addMethod,用正则表达式,非常好用。 之后,我终于开始了ajax的学习!结果第一关写一个简单ajax文件的时候就被击毙了,url写的东西怎么来的完全搞不清楚- - ,百度了半天,问了老师,稀里糊涂的出来了,指向了servlert,原来只要根目录加你要去的文件名,servlert映射一下就好了,也妹啥东西,html代码:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jquery-1.6.4.min.js"></script> </head> <body> <input type="button" value="发送ajax请求" οnclick="clk()"> <div id="myDiv">起飞</div> </body> <script> function clk() { var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/idea_java_war_exploded/ajaxtest",true); xmlhttp.send(); } </script> </html>

    servlert代码:

    package servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet(urlPatterns = "/ajaxtest") public class ajaxtest extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("666"); response.getWriter().write("Hello"); } }

    over。

    Processed: 0.010, SQL: 8