web-dev-qa-db-ja.com

AJAX callからjQueryを使用してHTMLをレンダリングする方法

書籍のリストが記載された選択ボックスがあります。ユーザーは本を選択して送信ボタンを押すと、別のページに章を表示できます。

ただし、ユーザーが選択ボックスを変更すると、ページを部分的に更新して、ユーザーが本に入力した過去のメモを表示し、ユーザーがその本に新しいメモを書き込めるようにします。次のページの章を含む特定の本のレビューとメモの作成は、混乱するため、望まない。

バックエンドでPython/Bottleを使用し、フロントエンドでそのSimpleTemplateエンジンを使用しています。

現在、選択ボックスが変更されると、ajax呼び出しは本の情報とすべてのメモを含むJson文字列を受け取ります。このjson文字列は、jQuery.parseJson()を介してjsonオブジェクトに変換されます。

次に、メモをループして、いくつかのセルと行を含むテーブルをレンダリングできるようにします。

（ボトル/テンプレートフレームワークの代わりに）jQuery/jsでこれを行う必要がありますか？完全な更新ではなく、部分的な更新のみが必要なので、私はそう思います。

Ajaxで取得したjsonオブジェクトからjQuery/jsを介して可変数の行を持つテーブルをレンダリングできるコードを探しています。

<head>
    <title>Book Notes Application - Subjects</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

    <script>
        $(document).ready(function(){
            $('#subject_id').change(function(){
                var subject_id = $(this).val();
                $.ajax({
                    url : "subject_ajax?subject_id=" + subject_id,
                    success : function(data) {
                        alert(data)

                        json = jQuery.parseJSON(data);
                    },
                    error : function() {
                        alert("Error");
                    }
                });
            })
        })

    </script>
</head>
<body>

    <!-- CHOOSE SUBJECT -->
    <FORM action="/books" id="choose_subject" name="choose_subject" method="POST">
        Choose a Subject:
        <select name="subject_id" id="subject_id">
            % for subject in subjects:
                <option value="{{subject.id}}">{{subject.name}}</option>
            % end
        </select><input type="submit" name="sub" value="Choose Subject"/>
        <BR />
    </FORM>
javascriptjquerypythonhtmlajax
5
Matthew Moisen

私はPython/BottleまたはそのSimpleTemplateエンジンに精通していませんが、JSONを返すのではなく、サーバー側でテーブルのhtmlを生成し、それをajax応答で返すことを検討できます。

_var subject_id = $(this).val();
$.ajax('subject_ajax', {
    type: 'get',
    data: { subject_id: subject_id },
    dataType: 'html',
    success : function(html) {
        // Insert the html into the page here using ".html(html)"
        // or a similar method.
    },
    error: function() {
        alert("Error");
    }
});
_

.ajax()を呼び出す場合：

  1. 「type」設定のデフォルトは「get」ですが、明示的に設定することをお勧めします。
  2. Ajax呼び出しの「データ」設定を使用して、URLパラメーターを指定します。
  3. 常に「dataType」設定を指定してください。

また、フォームのon-submitハンドラーでajax呼び出しを実行し、フォームを送信するselectのon-changeハンドラーを追加することをお勧めします。

_$(document).ready(function(){
    $('#subject_id').change(function() {
        $(this.form).submit();
    });

    $('#choose_subject').submit(function(event) {
        event.preventDefault();
        var subject_id = $('#subject_id').val();
        if (subject_id) {
            $.ajax(...);
        }
    });
});
_

このようにして、送信ボタンがクリックされた場合に機能するはずです。

5
John S

これは、JSONとHTMLのフォーマット方法に大きく依存します。しかし、次のようなテーブルがあります。

_<table id="books">
  <tr>
    <th>Chapter</th>
    <th>Summary</th>
  </tr>
</table>
_

あなたは次のようなことをすることができます：

_$(function(){
    $('#choose_subject').submit(function () {
        var subject_id = $(this).val();
        $.getJSON("subject_ajax?subject_id=" + subject_id, function(data) {
            console.log(data);
            $.each(data.chapters, function (index, chapter) {
                $('#books').append('<tr><td>' + chapter.title + '</td><td>' + chapter.summary + '</td></tr>');
            })
        });
        return false;
    })
})
_

これは、次のようなJSONを想定しています。

_{
  "notes": [
    "Note 1",
    "Note 2"
  ],
  "chapters": [
    {
      "title": "First chapter",
      "summary": "Some content"
    },
    {
      "title": "Second chapter",
      "summary": "More content"
    }
  ]
}
_

その他の注意事項：

  • HTML 4以前を使用する場合は、すべてのタグを大文字にしてください。 XHTMLまたはHTML5を使用している場合は、すべてのタグを小文字のままにしてください。
  • $(document).ready(function () {...})は必要ありません。最近のバージョンのjQueryでは、$(function () {...} )は同じように機能し、読みやすくなっています。
  • （ここにいるように）成功状態のみを使用している場合は、_$.get_の代わりに_$.json_を使用できます。また、取得するデータが有効なJSONであると確信している場合は、getJSONの代わりにgetを使用できます。 JSONを解析して、JavaScriptオブジェクトとして自動的に配信します。
  • 通常、テストするときはalertよりも_console.log_を使用する方が便利です。実際、通常、alertを使用することは一般的に悪い考えです。
5
eje211

あなたが見る必要があるいくつかのことがあります：

1）SimpleTemplateライブラリは含まれていますか？ 2）compileTemplate（）を介してテンプレートをコンパイルしましたか？

ライブラリが含まれていることがわかったら（コンソールでエラーを確認します）、返されたデータを成功ハンドラーメソッドに渡し、テンプレートをコンパイルして、更新しようとしている要素を更新します。

テンプレートを定義しているのと同じ要素を更新するかどうかはわかりません。

$(document).ready(function(){
    $('#subject_id').change(function(){
        var subject_id = $(this).val();
        $.ajax({
            url : "subject_ajax?subject_id=" + subject_id,
            success : function(data) {

                var template_data = JSON.parse(data);
                var template = $('#subject_id').toString(); // reference to your template
                var precompiledTemplate = compileTemplate(template);
                var result = precompiledTemplate(template_data);
                $('#subject_id').append(result);

            },
            error : function() {
                alert("Error");
            }
        });
    })
})

次のように、更新しようとしている要素からテンプレートを移動してみることもできます。

<script type="text/template" id="subject-select-template">
% for subject in subjects:
    <option value="{{subject.id}}">{{subject.name}}</option>
% end
</script>

次に、次のように空白のselect要素を作成します。

<select id="select_id"></select>

参照を更新します。とにかく、これがお役に立てば幸いです。それは動作するはずですが、私はあなたの特定のコードなしではテストできません;）

また、まだ行っていない場合は、このデモの例を確認してください： https://rawgithub.com/snoguchi/simple-template.js/master/test/test.html

1
David Yerrington