1

アプリケーションの多くの場所で使用される要素（コメントリストとフォーム）があります。ページ全体を更新する必要があることを除いて、すべて正常に機能します。これは、特にコメントが属するゲームをリセットし、すべての進行状況が悲劇的に失われる場合に問題になる可能性があります。私はAJAXの経験が非常に限られているので、コメントを追加して要素をリロードするための最も効果的で最も簡単な方法は何ですか？

これが私の要素です：

<?php
/*
set variables:
$data : data of the parent
$type : the type of the parent
$name : (optional)unique name to avoid naming conflicts
*/
if(!isset($name)) {
$name = 0;
}
foreach($data['Comment'] as $comment){
    echo '<div class="comment">'.$comment['content'].
        ' - '.$this->Html->link($comment['User']['username'],array('controller'=>'users','action'=>'view',$comment['User']['id']))
        .'</div>';
}
echo $this->Form->create(null, array('url' => '/comments/add','id'=>'qCommentForm'));
echo $this->Html->link('Leave comment','javascript:toggleDisplay("comment'.$name.'")');
echo '<br><div id="comment'.$name.'" style="display:none;">';
echo $this->Form->input('Comment.parent_id', array('type'=>'hidden','value'=>$data[$type]['id']));
echo $this->Form->input('Comment.parent_type', array('type'=>'hidden','value'=>$type));
echo $this->Form->textarea('Comment.content',array('div'=>'false','class'=>'small','label'=>false));
echo $this->Form->submit(__('Leave comment'),array('div'=>'false','class'=>'small'));
echo '</div>';
echo $this->Form->end();
?>

アップデート

さて、あなたの投稿のおかげでajaxについてもっとよく理解できましたが、これを「ケーキのように」行う方法はまだわかりません。

4

6 に答える 6

4

このようなHTMLの場合：

<div id="comments">
    <!-- list of comments here -->
</div>

<form method="post" action="/comments/add" id="qCommentForm">
    <textarea name="Comment.content"></textarea>
    <input type="submit" value="Leave comment">
</form>

JavaScript（この場合はjQuery）を使用して、送信イベントをインターセプトし、Ajaxでコメントデータを送信できます（PHPフォームハンドラーが新しいコメントのHTMLフラグメントを返すと仮定します）。

// run on document ready
$(function () {
    // find the comment form and add a submit event handler
    $('#qCommentForm').submit(function (e) {
        var form = $(this);

        // stop the browser from submitting the form
        e.preventDefault();

        // you can show a "Submitting..." message / loading "spinner" graphic, etc. here

        // do an Ajax POST
        $.post(form.prop('action'), form.serialize(), function (data) {
            // append the HTML fragment returned by the PHP form handler to the comments element
            $('#comments').append(data);
        });
    });
});

PHPフォームハンドラーが新しいコメントだけでなくコメントのリスト全体を（HTMLとして）返す場合は、次の.html()代わりに使用でき.append()ます。

$('#comments').html(data);

jQueryのドキュメントはhttp://docs.jquery.com/にあります。

更新：私はCakePHPの専門家ではありませんが、「ケーキウェイ」AFAICT：

  1. JsHelperを設定します。

    1. お好みのJavaScriptライブラリをダウンロードする

    2. ビュー/レイアウトにライブラリを含めます。例：

      echo $this->Html->script('jquery');

    3. ビュー/レイアウトにJsHelperバッファを書き込みます。例：

      echo $this->Js->writeBuffer();

    4. コントローラにJsHelperを含めます。例：

      public $helpers = array('Js' => array('Jquery'));

  2. JsHelper::submit()代わりに、FormHelper::submit()Ajaxフォーム送信を行う送信ボタンを生成するために使用します。例：

    echo $this->Js->submit('Leave comment', array('update' => '#comments'));

  3. コントローラーで、リクエストがAjaxリクエストであるかどうかを検出し、そうである場合は、Ajaxレイアウトを使用してレンダリングします。

    if ($this->request->is('ajax')) {
    $this->render('comments', 'ajax');
}

しかし、これにどのように影響するかはわかりませんRequestHandlerComponent。

于 2012-06-02T08:54:58.307 に答える
1

私はcakePHPについてよくわかりませんが、一般的に、カスタムアプリケーションでそれを行う方法は次のとおりです。

  1. 通常のHTMLフォーム要素を作成し、すべての入力を設定します。
  2. イベントリスナー（javascript）をこのフォームにバインドして、送信イベントをキャッチします。これはさまざまな方法で実行できます。特にajaxリクエストでは操作が簡単なため、jQueryライブラリを使用しています。送信ボタンを見てクリックイベントを聞くか、フォームを見て送信イベントを聞くことができます。
  3. イベントがトリガーされた場合、フォームが実際に送信されないようにfalseを返す必要があります。代わりに、フォームデータ（form.serialize()）を収集し、ajaxリクエストを介してサーバー上のPHPスクリプトにデータを送信します。
  4. スクリプトはリクエストを処理し、回答（HTMLコード）をクライアントのブラウザに送り返します。
  5. jQueryまたはカスタムJavaScriptを使用して、返されたHTMLを必要に応じて任意のDOM要素に挿入します。たとえば、フォームを新しいHTMLに置き換えることができます。
  6. 注：多くのPHPフレームワークには、ajaxリクエストを処理するための特別なコントローラーがあり、おそらくcakePHPもそうです。つまり、フレームワークパターン内でこれを機能させるには、2つのコントローラーと2つのビューが必要です。
于 2012-05-31T22:30:30.317 に答える
0

PHPについてはわかりませんが、Jspとjsを使用して、jsを呼び出すアクションを要素に配置し、そこにvar element = document.getElementById（）.. then element.innerHTML ="newvalue"のようなものを配置します。申し訳ありません。それがypurの状況で不可能な場合

于 2012-06-01T15:11:08.490 に答える
0

これがあなたが達成したいことを得るためのステップバイステップガイドです。

  1. まず、動的に更新されるコードのすべてのセクションを取得し、それらに一意のIDを与える必要があります。IDが特定のページに一度だけ存在する限り、IDは異なるページ間で同じにすることができます。

    <div id="comments"></div>

  2. 次に、フォームからコメントを投稿するためのajaxリクエストを作成する必要があります。次のコメントtextareaがあるとします（<form>ajaxリクエストには必要ありません）：

    <textarea name="comment" id="add_comment"></textarea>

    次のようなajaxリクエストを実行します。

    function refreshComments() {
    var comment = encodeURIComponent(document.getElementById('add_comment').value);
    var xmlhttp;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('comments').innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","add_comment.php?comment=" + comment, true);
    xmlhttp.send();
}

  3. submit次に、ボタンを次のように変更します。

    <input type="button" name="addComment" value="Add Comment" onClick="refreshComments();" />

  4. PHPでは、コメントを追加するリクエストを処理する必要があります。次に、その特定のページのすべてのコメントを返信する必要があります。（これにより、ユーザーはアイドル状態の間に他のユーザーから投稿されたコメントを見ることができます。）あなたがしなければならないのは、コメントをajaxページ（例のadd_comment.php）にエコーすることだけです。

これは、それがどのように機能するかについての一般的な考え方を確認するために遊ぶことができるフィドルです：http: //jsfiddle.net/xbrCk/

于 2012-06-03T03:09:03.683 に答える
0

以前の回答には、ajaxサンプルコードが含まれています。効率的なアプローチは、phpコードがコードによってロードされた最後のメッセージのuidを含むjavascript変数UIDを返し、空のdiv（つまり）を含めるようにすることです。次に、すべてのメッセージのinnerHTMLで一般的に再生する代わりに、ajax呼び出しの結果をそのdivの前に挿入し、変数UIDに新しい値を設定することもできます。また、この変数を任意の間隔で使用して、サーバーで新しいコメントをポーリングできます。

于 2012-06-04T05:46:44.710 に答える
0

ステップバイステップは次のとおり
です。1。最初にフォームを使用してhtmlファイルを作成します。フォームは次のようになります。

<body>
<div id="comment-list"></div>
<form id="form">
<textarea name="comment"></textarea>           
<input type="button" value="Submit Comment" id="submitcomments">
</form>
</body>

2.次に、次のようにjqueryライブラリを呼び出します。

 <script language="javascript"  src="<js directory>/jquery-1.7.2.js">/script>

ここでjqueryを取得できます：http：//api.jquery.com
3.次に、次のようなjqueryajaxを作成します。

<script>
$(document).ready(function()
{
        $("#submitcomments").click(function(){  //upon clicking of the button do an ajax post 
              var serializedata = $("#form").serialize(); //serialize the all fields inside the form
              $.ajax({
                     type: 'POST',
                     url: 'filename.php', //some php file returning the comment list
                     data: serializedata,// data that will be posted on php files
                     success: function(data)
                     {
                     $("#comment-list").append(data);  //now if the ajax post was success append the data came from php to the comment-list container in the html
                     }                                   
                  });
          });
});  
</script>
于 2012-06-05T06:27:50.383 に答える