Question

我在页面上有两个ajax调用。有用于搜索或返回结果的文本输入。

页面有几个非ajax输入，ajax文本输入在此范围内。每当我按Enter键 - 返回ajax调用时，表单提交并过早刷新页面。当在这些输入上按下输入时，如何阻止ajax提交表单？它应该得到结果。

但是，我不能按jquery键，因为即使用户选中另一个字段，它也需要运行ajax。基本上我需要这个在用户甚至无法获得ajax结果之前不在页面上提交完整表单。我读了返回false会解决这个问题，但事实并非如此。

这是javascript：

        <script type="text/javascript">
    $(function() {
        $("[id^='product-search']").change(function() {
            var myClass = $(this).attr("class");
            // getting the value that user typed
            var searchString    = $("#product-search" + myClass).val();
            // forming the queryString
            var data            = 'productSearch='+ searchString + '&formID=' + myClass;
            // if searchString is not empty
            if(searchString) {
                // ajax call
                $.ajax({
                    type: "POST",
                    url: "<?php echo $path ?>ajax/product_search.php",
                    data: data,
                    beforeSend: function(html) { // this happens before actual call
                        $("#results" + myClass).html(''); 
                        $("#searchresults" + myClass).show();
                        $(".word").html(searchString);
                   },
                   success: function(html){ // this happens after we get results
                        $("#results" + myClass).show();
                        $("#results" + myClass).append(html);
                  }
                });
            }
            return false;
            });

            $("[id^='inventory-ESN-']").change(function() {
                var arr = [<?php 
                $j = 1;
                foreach($checkESNArray as $value){
                    echo "'$value'"; 
                    if(count($checkESNArray) != $j)
                        echo ", ";
                    $j++;
                }
                ?>];
                var carrier = $(this).attr("class");
                var idVersion = $(this).attr("id");
                if($.inArray(carrier,arr) > -1) {
                // getting the value that user typed
                    var checkESN    = $("#inventory-ESN-" + idVersion).val();
                    // forming the queryString
                    var data            = 'checkESN='+ checkESN + '&carrier=' + carrier;
                    // if checkESN is not empty
                    if(checkESN) {
                        // ajax call
                        $.ajax({
                            type: "POST",
                            url: "<?php echo $path ?>ajax/checkESN.php",
                            data: data,
                            beforeSend: function(html) { // this happens before actual call
                                $("#esnResults" + idVersion).html(''); 
                            },
                            success: function(html){ // this happens after we get results
                                $("#esnResults" + idVersion).show();
                                $("#esnResults" + idVersion).append(html);
                            }
                        });    
                    }
                }
                return false;
            });
    });
    </script>

Answer 1

我建议你将ajax调用绑定到表单的submit事件并在结尾处返回false，这将阻止浏览器触发默认提交功能，并且只会执行你的ajax调用。

<强>更新

我不知道HTML的结构，所以我只想添加一个虚拟示例来说清楚。假设我们有一些表格（我猜你有这样一个表格，你试图阻止它提交）

HTML：

<form id="myForm">
    <input id="searchQuery" name="search" />
</form>

JavaScript的：

$("#myForm").submit({

                     // this will preform necessary ajax call and other stuff
    productSearch(); // I would suggest also to remove that functionality from
                     // change event listener and make a separate function to avoid duplicating code

    return false;
});

此代码将在每次尝试提交表单时运行（特别是当用户在输入中点击 Enter 键时），将执行必要的ajax调用并将返回false以此方式阻止提交。

如何防止页面上的jQuery ajax提交表单

1 个答案: