3

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

该页面有几个非 ajax 输入，并且 ajax 文本输入在 this 中。每当我按 enter -- 返回 ajax 调用时，表单都会过早提交并刷新页面。当在这些输入上按下 enter 时，如何防止 ajax 提交表单？它应该只是得到结果。

但是，我无法执行 jquery 按键，因为即使用户选项卡到另一个字段，它也需要运行 ajax。基本上我需要这个在用户甚至可以获得ajax结果之前不提交页面上的完整表单。我读了 return 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>
4

1 回答 1

2

我建议您将该 ajax 调用绑定到表单的提交事件并在最后返回 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 以防止以这种方式提交。

于 2012-09-14T00:57:03.203 回答