ajax 不使用form提交表格

Posted 2020-09-04

html代码：

<div class="message">
            
            <div><span>工号</span><input type="text"  class="phone"><div class="clear"></div></div>
            <div><span>密码</span><input type="password"  class="password"><div class="clear"></div></div>
            <div><span>验证码</span><input type="text" class="verifys" style=" width: 188px;"><img class="verify" src="{:U(‘Index/verify‘)}" alt="验证码" onClick="this.src=this.src+‘?‘+Math.random()" />
                <div class="clear"></div></div>
            <div><div class="btn">确定</div></div>
           
           
 </div>

jquery代码

<script type="text/javascript">
                                                 
    $(".message .btn").click(function(){
        var phone = $.trim($(‘.message .phone‘).val());
        var password = $.trim($(‘.message .password‘).val());
        var verify = $.trim($(‘.message .verifys‘).val());
        $.ajax({
            type: "POST",
            url: "{:U(‘Index/staff‘)}",                       //提交给后台函数 Index 中的 staff()函数
            data: {password:password,phone: phone, verify:verify},    
            dataType: "json",
            success: function (data) {
                if( data.id ==1  ){

                    window.location.href = "{:U(‘Index/knowledge‘)}";
                }else{
                    alert(data.info);
                }
            }
        })
    });

后台函数代码 可依据自身需求写

function staff(){
    
　　　　if( IS_AJAX ){
            
             if(I(‘post.phone‘) =="" || I(‘post.password‘) ==‘‘ ){
                         //$this->error("用户名或者密码为空！");
                 $this->ajaxReturn(array(‘id‘ =>0,‘info‘=>‘用户名或密码为空！‘ ));
            }
}