Php 发送表单后，如何在不刷新页面的情况下重新加载元素的内容（蛋糕方式）？
我有一个元素（注释列表和表单），在我的应用程序中的许多地方都使用它。除了需要刷新整个页面外，它工作得非常好。这可能是有问题的，特别是当它重置了你的评论所属的游戏时，会导致所有的进展都悲惨地丢失。我对AJAX的经验非常有限，那么用添加的注释重新加载元素的最有效、最简单的方法是什么呢 以下是我的要点：Php 发送表单后，如何在不刷新页面的情况下重新加载元素的内容（蛋糕方式）？,php,javascript,ajax,cakephp,cakephp-2.1,Php,Javascript,Ajax,Cakephp,Cakephp 2.1,我有一个元素（注释列表和表单），在我的应用程序中的许多地方都使用它。除了需要刷新整个页面外，它工作得非常好。这可能是有问题的，特别是当它重置了你的评论所属的游戏时，会导致所有的进展都悲惨地丢失。我对AJAX的经验非常有限，那么用添加的注释重新加载元素的最有效、最简单的方法是什么呢 以下是我的要点： <?php /* set variables: $data : data of the parent $type : the type of the parent $name : (option
<?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();
?>
我对cakePHP不太清楚，但总的来说，以下是我在自定义应用程序中的操作方法
创建一个普通HTML表单元素并设置所有输入
将事件侦听器（javascript）绑定到此表单以捕获提交事件。这可以通过多种方式完成，我使用jQuery库，因为它很容易处理，特别是ajax请求。您可以查看submit按钮并收听click事件，也可以查看表单并收听submit事件
如果触发了事件，则需要返回false，以便表单不会真正提交。而是收集表单数据（form.serialize（）
），并通过ajax请求将数据发送到服务器上的某个PHP脚本
脚本处理请求并将答案（HTML代码）发送回客户端浏览器
根据需要，使用jQuery或自定义javascript将返回的HTML注入任何DOM元素。例如，您可以用新的HTML替换表单
注意：许多PHP框架都有专门的控制器来处理ajax请求，cakePHP可能也有。这意味着，您需要两个控制器和两个视图才能在框架模式中工作
我不确定cakePHP，但总的来说，以下是我在自定义应用程序中的实现方式
创建一个普通HTML表单元素并设置所有输入
将事件侦听器（javascript）绑定到此表单以捕获提交事件。这可以通过多种方式完成，我使用jQuery库，因为它很容易处理，特别是ajax请求。您可以查看submit按钮并收听click事件，也可以查看表单并收听submit事件
如果触发了事件，则需要返回false，以便表单不会真正提交。而是收集表单数据（form.serialize（）
），并通过ajax请求将数据发送到服务器上的某个PHP脚本
脚本处理请求并将答案（HTML代码）发送回客户端浏览器
根据需要，使用jQuery或自定义javascript将返回的HTML注入任何DOM元素。例如，您可以用新的HTML替换表单
注意：许多PHP框架都有专门的控制器来处理ajax请求，cakePHP可能也有。这意味着，您需要两个控制器和两个视图才能在框架模式中工作
我不知道PHP，但是使用Jsp和js，
我会在一个元素上放置一个动作来调用js，其中有一个类似于var element=document.getElementById（）的东西。。然后是element.innerHTML=“新值”
很抱歉，如果在ypur的情况下不可能这样做我不了解PHP，但使用Jsp和js，
我会在一个元素上放置一个动作来调用js，其中有一个类似于var element=document.getElementById（）的东西。。然后是element.innerHTML=“新值”
很抱歉，如果在ypur情况下不可能这样做，请使用如下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>
<body>
<div id="comment-list"></div>
<form id="form">
<textarea name="comment"></textarea>
<input type="button" value="Submit Comment" id="submitcomments">
</form>
</body>
<script language="javascript" src="<js directory>/jquery-1.7.2.js">/script>
<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>
如果PHP表单处理程序返回整个注释列表（作为HTML），而不仅仅是新的注释列表，则可以使用.HTML（）
而不是.append（）
：
您可以在找到jQuery文档
更新：我不是CakePHP专家，而是“蛋糕方式”AFAICT：
:
下载您喜欢的JavaScript库
在视图/布局中包括库，例如
echo $this->Html->script('jquery');
echo $this->Js->writeBuffer();
if ($this->request->is('ajax')) {
$this->render('comments', 'ajax');
}
在视图/布局中编写JsHelper缓冲区，例如
echo $this->Html->script('jquery');
echo $this->Js->writeBuffer();
if ($this->request->is('ajax')) {
$this->render('comments', 'ajax');
}
在控制器中包括JsHelper，例如
public $helpers = array('Js' => array('Jquery'));
使用而不是FormHelper:：submit（）
生成一个提交按钮，该按钮将执行Ajax表单提交，例如
echo $this->Js->submit('Leave comment', array('update' => '#comments'));
在控制器中，检测请求是否是Ajax请求，如果是，则使用Ajax布局进行渲染，例如
echo $this->Html->script('jquery');
echo $this->Js->writeBuffer();
if ($this->request->is('ajax')) {
$this->render('comments', 'ajax');
}
但不确定是否/如何将这些数据纳入其中 使用如下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>
<body>
<div id="comment-list"></div>
<form id="form">
<textarea name="comment"></textarea>
<input type="button" value="Submit Comment" id="submitcomments">
</form>
</body>
<script language="javascript" src="<js directory>/jquery-1.7.2.js">/script>
<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>
如果PHP表单处理程序返回整个注释列表（作为HTML），而不仅仅是新的注释列表，则可以使用.HTML（）
而不是.append（）
：
您可以在找到jQuery文档
更新：我不是CakePHP专家，而是“蛋糕方式”AFAICT：
:
下载您喜欢的JavaScript库
在视图/布局中包括库，例如
echo $this->Html->script('jquery');
echo $this->Js->writeBuffer();
if ($this->request->is('ajax')) {
$this->render('comments', 'ajax');
}
在视图/布局中编写JsHelper缓冲区，例如
echo $this->Html->script('jquery');
echo $this->Js->writeBuffer();
if ($this->request->is('ajax')) {
$this->render('comments', 'ajax');
}
在控制器中包括JsHelper，例如
public $helpers = array('Js' => array('Jquery'));
使用而不是FormHelper:：submit（）
生成一个提交按钮，该按钮将执行Ajax表单提交，例如
echo $this->Js->submit('Leave comment', array('update' => '#comments'));
在控制器中，检测请求是否是Ajax请求，如果是，则使用Ajax布局进行渲染，例如
echo $this->Html->script('jquery');
echo $this->Js->writeBuffer();
if ($this->request->is('ajax')) {
$this->render('comments', 'ajax');
}
但不确定是否/如何将这些数据纳入其中 这里有一个逐步指南，可以帮助您实现目标
首先，您需要获取要动态更新的代码的所有部分，并给它们一个唯一的id。该id可以在不同的页面上相同，只要该id在某个页面上只存在一次
<div id="comments"></div>
现在将您的submit
按钮更改为类似以下内容：
<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>
<body>
<div id="comment-list"></div>
<form id="form">
<textarea name="comment"></textarea>
<input type="button" value="Submit Comment" id="submitcomments">
</form>
</body>
<script language="javascript" src="<js directory>/jquery-1.7.2.js">/script>
<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>
现在在PHP中，您需要处理添加注释的请求，然后需要回复该特定页面的所有注释。（这将允许用户在访问时查看其他用户发布的任何评论。）