• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax的简单实用实例代码

    我将实现一个简单的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局部刷新实例 (三种方法推荐)
    • Ajax和$.ajax使用实例详解(推荐)
    • spring mvc 和ajax异步交互完整实例代码
    • ajax与json 获取数据并在前台使用简单实例
    • springMVC+ajax实现文件上传且带进度条实例
    上一篇:PHP Ajax实现表格实时编辑
    下一篇:Ajax配合Spring实现文件上传功能代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax的简单实用实例代码 Ajax,的,简单,实用,实例,