Question

我在页面上有两个选择。当任何一个被更改时，我使用jQuery AJAX将值发布到PHP脚本并返回结果，然后将其放在页面上。

我希望这也可以在文档上运行，但我不知道最优雅或“正确”的方式。据推测，将其中的一部分包装在一个函数中并在文档就绪时调用它;如果是这样的话，我该怎么做？目前，代码是重复的（见下文）。

谢谢

<script type="text/javascript">

$(document).ready(function(){

            $("#results").html('Searching...');

                var foo = $("#foo").val();
                var bar = $("#bar").val();

            $.ajax({
                type: "POST",
                url: "ajax_script.php",
                data: "foo=" + foo + "&bar=" + bar ,

                success: function(msg){

                if(msg == 'nil')
                     { 
                     $('#results').html('No results');
                     } 
                    else 
                    {
                        $('#results').html(msg);
                    } 

                } // complete AJAX success

            }); // complete AJAX


            $("#foo, #bar").change(function(){        
            $("#results").html('Searching...');

            var foo = $("#foo").val();
            var bar = $("#bar").val();

            $.ajax({
                type: "POST",
                url: "ajax_script.php",
                data: "foo=" + foo + "&bar=" + bar ,

                success: function(msg){

                    if(msg == 'nil')
                     { 
                     $('#results').html('No results');
                     } 
                    else 
                    {
                     $('#results').html(msg);
                    } 

                } // complete AJAX success

            }); // complete AJAX
        });

    });
    </script>

Answer 1

将整个ajax放在一个函数中，如

function my_ajax() {
     $("#results").html('Searching...');

            var foo = $("#foo").val();
            var bar = $("#bar").val();

        $.ajax({
            type: "POST",
            url: "ajax_script.php",
            data: "foo=" + foo + "&bar=" + bar ,

            success: function(msg){

                if(msg == 'nil') { 
                   $('#results').html('No results');
                } else {
                   $('#results').html(msg);
                } 
            } // complete AJAX success
        }); // complete AJAX
}

并在dom ready和on change上调用此功能

$(document).ready(function(){
      my_ajax();              //On DOM ready
      $("#foo, #bar").on('change',function(){        
           my_ajax();
      });
});

Answer 2

你应该创建一个函数并将所有代码移动到该函数中并调用该函数onChange事件。见下面的例子：

JS：

$(function(){
    myFunction();
    $("#foo, #bar").change(myFunction);
});
function myFunction(){
    $("#results").html('Searching...');

            var foo = $("#foo").val();
            var bar = $("#bar").val();

        $.ajax({
            type: "POST",
            url: "ajax_script.php",
            data: "foo=" + foo + "&bar=" + bar ,

            success: function(msg){

            if(msg == 'nil')
                 { 
                 $('#results').html('No results');
                 } 
                else 
                {
                    $('#results').html(msg);
                } 

            } // complete AJAX success

        }); // complete AJAX
}

Answer 3

你也可以这样使用trigger：

    $("#foo, #bar").change(function() {
        $("#results").html('Searching...');

        var foo = $("#foo").val();
        var bar = $("#bar").val();

        $.ajax({
            type: "POST",
            url: "ajax_script.php",
            data: "foo=" + foo + "&bar=" + bar ,

            success: function(msg) {
                if(msg == 'nil') {
                    $('#results').html('No results');
                } else {
                    $('#results').html(msg);
                }
            }
        })
    }).trigger('change');

这样就可以在文档准备就绪时触发（如果你把文档准备好了），并且当你选择更改时仍然可以使用它。

防止jQuery中的代码重复

3 个答案: