Question

我使用jQuery使用下面的代码发布到外部数据源。我也在验证输入以确保填写所有字段。最初，似乎代码只在50％的时间内正确发布。我没有看到任何消息或指示帖子失败但是当我检查外部数据源时，它并不总是存在。所以我在帖子调用之前和之后放了alert()个框以确保它被调用，这似乎使它一致地发布，我猜是因为它增加了延迟？我很困惑为什么每次使用alert框使得帖子成功。如何修复它以便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>

Answer 1

只需在submit事件侦听器上使用，并防止默认浏览器行为以避免表单重定向。

jQuery发布不一致

1 个答案: