-1

我在一个页面上有两个选择。当其中任何一个发生更改时，我使用 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>
4

3 回答 3

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();
      });
});
于 2013-08-06T07:37:52.263 回答
0

您应该创建一个函数并将所有代码移动到该函数中并调用该函数 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
}
于 2013-08-06T07:42:39.380 回答
0

你也可以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');

这样，它会在文档就绪时触发（如果您将其与文档就绪一起放置），并且在您的选择更改时仍然可以使用它。

于 2013-08-06T08:13:29.163 回答