jquery+ajax+post实现表单提交及验证

2018/11/11 23:30:7 | 阅214 来源:好空间网络 [打印] [关闭]
 

1:编写HTML文件

<script type="text/javascript" src="../../static/admin/zhuye/js/jquery.js"></script>
<script type="text/javascript" src="../../static/admin/zhuye/js/main.js"></script>
<script type="text/javascript" src="../../static/admin/zhuye/js/constellation.js"></script>
//引入必要的js文件
  <ul><!--必要的输入参数_start-->
                <li class="windx">
                  <div class="lita">账户</div>
                  <div class="rita">
                    <!--登录名输入框-->
                    <input type="text" placeholder="请输入用户名" name="login_user" />
                  </div>
                    </li>
                    <li class="windx">
                  <div class="lita a1">密码</div>
                  <div class="rita">
                    <!--密码输入框-->
                    <input type="password" placeholder="请输入密码" name="login_pwd" />
                  </div>
                </li>
                <li class="windx">
                  <div class="lita a2">验证</div>
                        <div style="position:absolute; z-index:2;margin-left: 97px;margin-top: 13px;">
                    <!--验证码img-->
                    <img class="yzsite" width="63" height="19" src="/moban/ImageServlet" title="点击刷新验证码" onClick="history.go(0)"/>
                                                                                                                                                                                                                                                                                                
                  </div>
                        <div class="rita">
                    <!--验证码输入框写法-->
                    <input type="text" placeholder="请输入验证码" class="xux" name="rand_rs" />
                                                                                                                                                                                                                                                                                        
                    <div class="at info"></div>
                  </div>
                </li>
                <li class="windx">
                  <div class="rita"><a href="#" class="subt submitbtn">登录</a></div>
                </li>
                <li class="windx link">
                  <a href="#" target='_blank'>帮助中心</a>
                                                                                                                                                                                                                                                                                          
                </li>
                <!--必要的输入参数_end-->
              </ul>

2:修改constellation.js

//回车登陆
 $(document).keydown(function(e){
  var ev = window.event || e;
  if(ev.keyCode==13) {$('.submitbtn').trigger('click');}
 });
 //提交登录信息
 $('.submitbtn').click(function(){
  var currbox_state = $(this).parent().parent().parent().css('display') || '';
  if(currbox_state == 'block'){
    var $current_box = $(this).parent().parent().parent();
    var login_user = $current_box.find('input[name=login_user]');
    var login_pwd = $current_box.find('input[name=login_pwd]');
    var rand_rs = $current_box.find('input[name=rand_rs]');
    var token = $current_box.find('input[name=token]');
    if(login_user.val() == ''){
      error(login_user.parent(),'账号不能为空!');
      return false;
    }
    if(login_pwd.val() == ''){
      error(login_pwd.parent(),'密码不能为空!');
      return false;
    }
    if(rand_rs.val() == ''){
      error(rand_rs.parent(),'验证码不能为空!');
      return false;
    }
    /*提交的js_start
      提交方法:ajax - post()
      请求url:index.php?_m=frontpage&_a=do_login
      提交的参数:login_user(用户名)、login_pwd(密码)、rand_rs(验证码)、token(token变量)
      返回值说明:1:提交成功;2:验证码错误;3:用户名或密码错误;4:参数不能为空
    */
    $.post('/moban/PanDuan',{login_user:login_user.val(),login_pwd:login_pwd.val(),rand_rs:rand_rs.val()},function(data){
      var d_arr = [];
      d_arr = data.split('#');
      if(d_arr[0]==1){
        location.href=d_arr[1]+'/index.jsp';
      }else if(d_arr[0]==2){
        $current_box.find(".info").empty().html('验证码输入错误').show();
      }else if(d_arr[0]==3){
        $current_box.find(".info").empty().html('用户名或密码错误').show();
      }else{
          $current_box.find(".info").empty().html('参数不合法').show();
          }
      })
    /*提交的js_end*/
    }else{return false;}
 });

思路:先判断用户输入是否合法,如果合法则post方法提交

post('URL',{参数名:参数值},function(data){
//1:data是请求回调的数据
//2:回调的数据为1#https://www.jspkongjian.com(登陆成功后的转向URL)这样类似的,所以要以#分割
//3:设置info的标签显示内容
})


js.rar


经营许可证ICP:皖B2-20100052 公司邮箱:zcdnsz@jspkongjian.net
Copyright © 2004-2015, 安徽好空间网络科技有限公司 版权所有 , 本站素材部分来源于网络,如有侵权请告知删除。