javascript - 如何防止加载加载此 ajax 请求中的所有数据？

Question

我正在用 Ajax 练习小例子。我想在 div#testID 容器的下拉列表中更新更新选择的选项。但它正在将整个页面加载到 div 我该如何防止这种情况。在我一直在使用的示例代码下方。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>

<form acttion="" method="post" name="DispalyForm">
    Dispaly: <select name="SelectFilter" class="filter">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
</form>
<div id="testID">#SelectFilter#</div>

<script type="text/javascript">
    $(function() {
        $('.filter').change(function() {
            $('form[name=DispalyForm]').submit();
        });
        $('form[name=DispalyForm]').submit(function(event) {
            var data = $(this).serialize();
            $.ajax({
                url : window.location,
                type : "POST",
                data : data,
                dataType : "html",
                success : function(data) {
                    $('#testID').html(data);
                }
            });
            event.preventDefault();
        });
    });
</script>

任何帮助将不胜感激

Answer 1

要练习 ajax 示例，请使用服务器端返回数据的其他文件。：

例如在“PHP”中： test.php ：该文件检查请求是否已发布，返回“SelectFilter”的数据。

  if ($_REQUEST['post']){
      echo $_REQUEST['SelectFilter']; 
  }

您的 html 文件：-您的基本 html 文件

<form action="" method="post" name="DispalyForm">
    Display: <select name="SelectFilter" class="filter">
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select>
</form>
<div id="testID">#SelectFilter#</div>

<script type="text/javascript">
$(function() {
    $('.filter').change(function() {
        $('form[name=DispalyForm]').submit();
    });
    $('form[name=DispalyForm]').submit(function(event) {
        var data = $(this).serialize();
        $.ajax({
            url : "test.php
,
            type : "POST",
            data : data,
            dataType : "html",
            success : function(data) {
                $('#testID').html(data);
            }
        });
        event.preventDefault();
    });
});

您当前正在做的另一件事，dataType 为“html”，因此它将向您发送完整的页面。您还可以使用 json 作为最佳实践来获取必要的数据：

示例 json：

 {
  "requestedValue": "test"
  }

在 js 中，你只需要：

  $('#testID').html(data.requestedValue);