Question

我正在使用jQuery Ajax函数来填充我的选择框。这是代码：

    $(function(){             
        $("#maker").change(function(){            
        var selected_value = $("#maker").val();      

        $.ajax({
            type: "POST",
            url: "search.php",
            data: ({_maker: selected_value}),
            success: function(response){
                $("#models").html(response);
            }
        });        
        });
    });

问题是这取代了整个search.php页面的div“模型”！我只想在“模型”中填充选项值。

这是HTML：

<div id="models">
<select id="model" name="model" style="width:170px">
<option value="Any">Any</option>
<?php
    foreach($current_models as $model) {
?>
    <option value="<?php echo $model; ?>"><?php echo $model; ?></option>

<?php
    }
?>
</select></div>

感谢任何帮助。提前谢谢。

Answer 1

所以看起来你正在返回整个HTML页面，而不是通过搜索来查找页面的特定部分。尝试这样的事情：

$(function(){             
    $("#maker").change(function(){            
    var selected_value = $("#maker").val();      

        $.ajax({
            type: "POST",
            dataType: "html",
            url: "search.php",
            data: ({_maker: selected_value}),
            success: function(response){
                $("#models").html($(response).find('#someDiv').html());
            }
            error: function(){
                  $("#models").html('Uh oh! Something went wrong and we weren't able to process your request correctly.');
            }
        });        
    });
});

你会注意到两件事：

我指定了dataType属性。这告诉jQuery会发生什么。此外，html数据类型告诉jQuery在将页面呈现到响应对象之前执行加载页面上的任何JavaScript。
我正在使用响应创建一个jQuery对象，然后使用jQuery的.find()方法获取响应中特定div的内部HTML。

以下是JS Fiddle的一个示例，对概念验证稍作修改：http://jsfiddle.net/rvk44/1/

我还想注意你可能想要添加一个错误属性，这样如果页面作为错误返回，用户就知道并且不只是坐在那里盯着空白的屏幕，期待发生的事情。（我在示例中添加了一条基本错误消息，请参阅jQuery docs以获取有关返回错误属性的更多信息。）

jQuery Ajax用整个.php页面替换div

1 个答案: