3

1つのページに2つのajax呼び出しがあります。検索または結果を返すためのテキスト入力があります。

ページにはいくつかの非ajax入力があり、ajaxテキスト入力はこの中にあります。Enterキーを押すたびに、ajax呼び出しを返すために、フォームが送信され、ページが早まって更新されます。これらの入力でEnterキーが押されたときに、ajaxがフォームを送信しないようにするにはどうすればよいですか？結果が出るはずです。

ただし、ユーザーが別のフィールドにタブで移動してもajaxを実行する必要があるため、jqueryキーを押すことはできません。基本的に、ユーザーが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 に答える