【jquery采坑】Ajax配合form的submit提交（微擎表单提交，ajax验证，submit提交）

最新推荐文章于 2023-11-20 10:35:57 发布

转载最新推荐文章于 2023-11-20 10:35:57 发布 · 525 阅读

文章标签：

#javascript #php #后端 #ViewUI

本文介绍了一种结合HTML表单提交与AJAX动态数据验证的方法，通过在提交前进行异步请求，实现了对配送日期和区域的库存检查，确保了用户提交的数据符合后端的业务逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、采坑：实现form的submit提交，在提交之前，进行ajax的不同校验，然后onsubmit=return check()，进行提交

1/1 目的：可以实现以 from的submit提交，然后还能进行数据的ajax动态验证。

2、html：

<form class="form-horizontal" method="post" role="form" onsubmit='return check()'>

    <button type="submit" name="submit" id="submit_color" value="yes" >提交订单</button><br/>

    <input type="hidden" name="token" value="{$_W['token']}" />
    <input type="hidden" name="source_from" value="午夜专区订购" />
    <input type="hidden" name="can_buy" value="1" />
    </div>
</form>

3、js：

function check(){
        var self=false;
        var delivery_date = $('input[name=delivery_date]').val();
        var delivery_way=$('#dispatch option:selected').val();
;
        var area_name = $("#area_span").html();
//配送方式需要区域限单判断 -- addBy xzz 2018/09/30
        if(delivery_way=='4'||delivery_way=='8'){
            $.ajax({
                type: "POST",
                dataType: "JSON",
                async: false,        //这里必须是同步，否则程序逻辑错误
                url: "{php echo $this->createMobileUrl('checkself2',['op'=>'send_ajax_order_num_check'])}",
                data: {'delivery_date':delivery_date,'area_name':area_name},
                success: function(msg){
                    console.log(msg);
                    if(msg.error==0){
                        alert('抱歉！'+delivery_date+'日 配送量已经饱和，请选择自提');
                        self=true;
                    }else{
                        return true;
                    }
                }
            });
        }else{
            //自提不限
            return true;
        }
        //配送库存是否满足限购，true不允许再下单，false允许下单
        if(self){
            return false;
        }
}