Ajax的简单实用实例代码
程序员文章站
2022-06-17 13:33:29
我将实现一个简单的ajax页面无刷新进行用户验证案例:
效果如下图:
实现主要过程:
在usersaction类中的checkuser方法中接收并验证前台的表单数...
我将实现一个简单的ajax页面无刷新进行用户验证案例:
效果如下图:
实现主要过程:
在usersaction类中的checkuser方法中接收并验证前台的表单数据,针对不同情况,返回一个状态码code给jsp页面,然后在ajax1.jsp中通过$.post方法接受后台传递过来的状态码
做出不同的响应。
具体代码如下:
1.实体类
package com.bean; import java.io.serializable; public class users implements serializable { private string uname; private string passwd; public string getuname() { return uname; } public void setuname(string uname) { this.uname = uname; } public string getpasswd() { return passwd; } public void setpasswd(string passwd) { this.passwd = passwd; } public users(string uname, string passwd) { super(); this.uname = uname; this.passwd = passwd; } public users() { super(); } }
2.action类
package com.action; import java.io.ioexception; import java.io.printwriter; import javax.servlet.http.httpservletresponse; import org.apache.struts2.servletactioncontext; import org.apache.struts2.convention.annotation.action; import com.bean.users; public class usersaction { private users us; public users getus() { return us; } public void setus(users us) { this.us = us; } @action(value="checkuser") public string checkuser() { system.out.println("aaaaaaaaa"); httpservletresponse response = servletactioncontext.getresponse(); response.setcharacterencoding("utf-8"); try { printwriter out = response.getwriter(); int code = 0; if (us == null) { out.print(0); return null; } else { if (us.getuname() == null || us.getuname().trim().equals("")) { code = 1; out.print(code); return null; } else { if (us.getpasswd() == null || us.getpasswd().trim().equals("")) { code = 2; out.print(code); return null; } else { code = 200; out.print(code); } } } out.flush(); out.close(); } catch (ioexception e) { // todo auto-generated catch block e.printstacktrace(); } return null; } }
3.ajax1.jsp
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%> <%string path = request.getcontextpath(); string basepath = request.getscheme()+"://"+request.getservername()+":"+request.getserverport()+path+"/"; %> <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <base href="<%=basepath%>" rel="external nofollow" > <title>ajax练习</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" > --> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script> $(function() { $("#btok").click(function() { //获取数据 var uname = $("#uname").val(); var passwd = $("#passwd").val(); //将数据组织为json格式 var json = {"us.uname":uname,"us.passwd":passwd}; //进行异步请求 $.post("checkuser.action",json,function(msg){ if(msg == '0') { alert("用户名和密码错误!"); return; } if(msg == '1') { $("#uerror").html("用户名错误!"); return; } else { $("#uerror").html("*"); } if(msg == '2') { $("#perror").html("密码错误!"); return; } else { $("#perror").html("*"); } if(msg == '200') { alert("登陆成功!"); return; } }); }); }); </script> </head> <body> <form name="form1" method="post" action=""> <table width="450" border="1" align="center" cellpadding="1" cellspacing="0"> <tr> <td colspan="2" align="center" valign="middle" bgcolor="#ffffcc">用户注册</td> </tr> <tr> <td width="88">账号:</td> <td width="352"><label for="uname"></label> <input type="text" name="uname" id="uname"> <span id="uerror" style="color:#f06;">*</span></td> </tr> <tr> <td>密码:</td> <td><label for="passwd"></label> <input type="password" name="passwd" id="passwd"> <span id="perror" style="color:#f06;">*</span></td> </tr> <tr align="center" valign="middle" bgcolor="#ffffcc"> <td colspan="2"><input type="button" name="button" id="btok" value="确定"> <input type="reset" name="button2" id="button2" value="重置"></td> </tr> </table> </form> <br> </body> </html>
以上所述是小编给大家介绍的ajax的简单实用实例代码,希望对大家有所帮助
上一篇: ajax 数据库中随机读取5条数据动态在页面中刷新
下一篇: java保存文件