jQuery发布不一致_Jquery_Html - Fatal编程技术网

jQuery发布不一致

jquery html

jQuery发布不一致,jquery,html,Jquery,Html,我正在使用jQuery使用下面的代码发布到外部数据源。我还在验证输入，以确保所有字段都已填写。起初，代码似乎只在50%的时间内正确发布。我没有看到post失败的任何消息或指示，但当我检查外部数据源时，它并不总是在那里。因此，我在post调用之前和之后放置了alert（）框，以确保它被调用，这似乎使它能够一致地进行post，我猜是因为它增加了延迟？我很困惑，为什么每次使用alert框都会使帖子成功。如何修复它，使警报框不需要成功发布 <html> <head> &l

我正在使用jQuery使用下面的代码发布到外部数据源。我还在验证输入，以确保所有字段都已填写。起初，代码似乎只在50%的时间内正确发布。我没有看到post失败的任何消息或指示，但当我检查外部数据源时，它并不总是在那里。因此，我在post调用之前和之后放置了

alert（）

框，以确保它被调用，这似乎使它能够一致地进行post，我猜是因为它增加了延迟？我很困惑，为什么每次使用

alert

框都会使帖子成功。如何修复它，使

警报

框不需要成功发布

<html>
<head>
    <title>Test title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
    <body>
    <form>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">Name</span>
                <input class="form-control" placeholder="Your name" id="User_Name" name="User_Name" type="text" />
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">E-Mail</span>
                <input class="form-control" placeholder="Your e-mail adress" id="Email_Address" name="Email_Address"  type="text" />
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">Closest Store</span>
                <select id="Closest_Store" name="Closest_Store" class="form-control required">
                    <option value="">Please choose</option>
                    <option value="Store 1">Store 1</option>
                    <option value="Store 2">Store 2</option>
                    <option value="Store 3">Store 3</option>
                    <option value="Store 4">Store 4</option>
                    <option value="Store 5">Store 5</option>
                    <option value="Store 6">Store 6</option>
                    <option value="Store 7">Store 7</option>
                    <option value="Store 8">Store 8</option>
                    <option value="Store 9">Store 9</option>
                    <option value="Store 10">Store 10</option>
                    <option value="Store 11">Store 11</option>
                </select>
            </div>
        </div>
        <button class="button">Subscribe</button>
        </form>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript" ></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript" ></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>
            <script type="text/javascript">
                $('form').validate({
                    rules: {
                        User_Name: {
                            minlength: 3,
                            maxlength: 15,
                            required: true
                        },
                        Email_Address: {
                            email: true,
                            required: true
                        }
                    },
                    highlight: function(element) {
                        $(element).closest('.form-group').addClass('has-error');
                    },
                    unhighlight: function(element) {
                        $(element).closest('.form-group').removeClass('has-error');
                    },
                    errorElement: 'span',
                    errorClass: 'help-block',
                    errorPlacement: function(error, element) {
                        if(element.parent('.input-group').length) {
                            error.insertAfter(element.parent());
                        } else {
                            error.insertAfter(element);
                        }
                    }
                });

                $(".button").click(function(){
                    var name = $.trim($("#User_Name").val());
                    var sourcePage = document.title;
                    var email = $.trim($("#Email_Address").val());
                    var store = $.trim($("#Closest_Store option:selected" ).text());

                    if(name.length == 0) {
                        return;
                    }

                    if(email.length == 0) {
                        return;
                    }

                    alert("Posting");
                    $.post("[Post URL]",
                    {
                        User_Name: name,
                        Email_Address: email,
                        Closest_Store: store,
                        Subscription_Source: sourcePage,
                        _clientID: "[Client ID]",
                        _action: "add",
                        _deExternalKey: "[External Key]",
                        _successURL: "[URL]",
                        _errorURL: "[URL]"
                    },
                    function(data, status){
                        alert("Data: " + data + "\nStatus: " + status);
                    });
                    alert("Posting done");
                });
              </script>
       </body>
</html>


考试题目
名称
电子邮件
最近的商店
请选择
商店1
商店2
商店3
商店4
商店5
商店6
商店7
商店8
商店9
商店10
商店11
订阅
$（'form'）。请验证({
规则：{
用户名：{
最小长度：3，
最大长度：15，
必填项：true
},
电邮地址：{
电子邮件：是的，
必填项：true
}
},
亮点：功能（元素）{
$（元素）。最近（'.form group'）。addClass（'has-error'）；
},
取消高亮显示：功能（元素）{
$（元素）。最近（'.form group'）。removeClass（'has-error'）；
},
errorElement:'span'，
errorClass:“帮助阻止”，
errorPlacement:函数（错误，元素）{
if（element.parent（'.input group'）.length）{
错误.insertAfter（element.parent（））；
}否则{
错误。插入符（元素）；
}
}
});
$（“.button”）。单击（函数（）{
var name=$.trim（$（“#User_name”）.val（）；
var sourcePage=document.title；
var email=$.trim（$（“#email_地址”）.val（）；
var store=$.trim（$（“#最近的_存储选项：选中”）.text（）；
如果（name.length==0）{
返回；
}
如果（email.length==0）{
返回；
}
警报（“张贴”）；
$.post（“[post URL]”，
{
用户名：Name，
电子邮件地址：电子邮件，
最近的商店：商店，
订阅来源：sourcePage，
_客户端ID:“[客户端ID]”，
_行动：“添加”，
_deExternalKey:“[外部密钥]”，
_successURL:“[URL]”，
_错误URL:“[URL]”
},
功能（数据、状态）{
警报（“数据：+数据+”\n状态：+状态）；
});
警报（“过账完成”）；
});

只需在

提交事件侦听器上使用，并防止默认浏览器行为，以避免表单重定向。
您的页面正在重新加载。有时它发生在发送请求之前，有时发生在发送之后。添加警报会延迟页面的重新加载，使请求有足够的时间发送。明白了，这正是我所怀疑的。因此，在这篇文章之后，您使用event.preventDefault（）说这是一个复制品
会阻止页面加载，并且一切正常。但Syncro提出了这一建议，并被否决。是否有更好的方法来处理此问题或…？没有，但是由于不相关的原因，使用提交事件而不是单击事件通常更好。（无论是通过单击按钮还是按输入键触发提交，提交事件都会触发，而单击当然只会在单击时发生。）