0

私は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>

どんな助けでも大歓迎です

4

1 に答える 1

0

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

現在行っているもう1つのこと、dataType as "html"なので、完全なページが送信されます。必要なデータを取得するためのベストプラクティスとしてjsonを使用することもできます。

例json：

 {
  "requestedValue": "test"
  }

jsでは、あなたはただする必要があります：

  $('#testID').html(data.requestedValue);
于 2013-01-09T23:05:17.743 に答える