0

私はhtmlでこのようなフォームを持っています:

<form class="well span9 offset1" action="/summary/" method="post">
    {% csrf_token %}
        <fieldset>
        <label class="control-label" for ="inputIcon">Type or paste your text into box:</label>
        </fieldset>
        <div class="controls">
            <div class="input-prepend">
                <textarea rows="15" class="span9"></textarea> 

            </div>
            </div>


        <fieldset>
        <input type="checkbox" name="input_text" />
        Send me the copy of summary by e-mail.

        </fieldset><br />
        <a href="#summaryModal" data-toggle="modal"><button type="submit" class="btn btn-primary offset3">Summarize</button></a>
    <button type="reset" class="btn btn-danger">Reset</button>
</form>

ユーザーがフォームを送信している間、このフォームをサマリー関数で処理し、ブートストラップのモーダルで結果を関数に返します。ただし、関数に移動する代わりに、ポップアップ（モーダル）を開くだけです。結果を持つ関数からこの同じテンプレートに戻ります。これどうやってするの？Ajax は必要ですか?

4

1 に答える 1

0

JavaScript 関数を提供していないので、それらが用意されていると仮定します。はい、これを機能させるには AJAX を使用する必要があります。従う必要がある手順は次のとおりです。

  1. ボタンの構文は次のようにする必要があります。<button type="button" class="btn btn-primary offset3" onClick="summaryFunction()">Summarize</button>

  2. ボタンをクリックすると、JavaScript 関数が起動します (この場合は、summaryFunction() と呼びます)。

  3. この関数は、JSON 形式でデータを返す PHP ページにフォームから詳細を送信する必要があります。（これは役立つかもしれません）

  4. $('#divId').innerHTML を使用して、PHP ページから返されたものを使用してモーダル ウィンドウのコンテンツを設定します。

  5. $('#divId').modal(); を使用してモーダル ウィンドウを起動します。

それが役に立てば幸い。

次に例を示します。上記の構文を使用して、ボタンが summaryFunction() という JavaScript 関数を起動するようにします。JavaScript 関数は次のようになります。

<script>
function summaryFunction(){
$text = $('#textAreaId').val();
$.post("test.php", { "postedText": text },
function(data){
$('#modalInnerDiv').innerHTML = data.response;
$('#summaryModal').modal();
}, "json");
}
</script>

textarea 要素に ID を指定してください。test.php を PHP ファイルに置き換えます。それは、postedText という名前の投稿された値を探す必要があります。返信をキー「応答」の配列に入れます。例$reply = array("response" => $response)を示し、json_encode() を使用して JSON にシリアル化します。PHP ファイルは、この JSON 値をエコーする必要があります。

モーダル内に ID #modalInnerDiv を持つ空の div を作成します。そのコンテンツは PHP ページからの応答で満たされ、モーダル ウィンドウに表示されます。

于 2013-03-29T17:07:38.753 に答える