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);

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

1 个答案: