使用 AJAX、jQuery 和 CakePHP 在对话框中显示消息

Question

我有一个表单，当用户提交这个表单时，它应该将数据传递给使用 AJAX 的函数。然后，结果会在对话框中显示给用户。我正在使用 CakePHP (1.3) 和 jQuery 来尝试实现这一点，但我觉得我遇到了困难。

该表单最终将用于上传带有标签的图像，但现在我只想看到一个消息在框中弹出..

形式：

<?php                                                                                                                                                                                                                                                                             
  echo $this->Form->create('Image', array('type' => 'file', 'controller' => 'images', 
                           'action' =>   'upload', 'method' => 'post'));
  echo $this->Form->input('Wallpaper', array('type' => 'file'));
  echo $this->Form->input('Tags');
  echo $this->Form->end('Upload!');
?>

AJAX：

$(document).ready(function() {
  $("#ImageUploadForm").submit(function() {                                                                                                                                                                                                                                   
    $.ajax({
      type: "POST", url: "/images/upload/",
      data: $(this).serialize(),
      async: false,
      success: function(html){
        $("#dialog-modal").dialog({
          $("#dialog-modal").append("<p>"+html+"</p>");
          height: 140,
          modal: true,
          buttons: {
            Ok: function() {
              $(this).dialog('close');
            }
          }
        })
      }
    });
    return false;
  });
});

注意：如果我将$("#dialog-modal").dialog({ height: 140, modal: true }); 放在$.ajax 之外但在$("#ImageUploadForm").submit(function() { 内并注释掉$.ajax 的东西，我会看到一个对话框弹出，然后我必须单击它才能看到离开。之后就不会转发到/images/upload/的位置了

AJAX调用的方法：

  public function upload()
  {
    $this->autoRender = false;

    if ($this->RequestHandler->isAjax())
    {   
      echo 'Hi!';
      exit();
    }   
  }

$this->RequestHandler->isAjax() 似乎什么都不做，或者它总是返回 false。我从来没有输入过以此为条件的 if 语句。

感谢所有帮助，如果您需要更多信息，请告诉我。

Answer 1

试试这个：

$(document).ready(function(){
 $.ajax({
  type: "POST", url: "/images/upload/",
  data: $(this).serialize(),
  async: false,
  success: function(html){
    //First you must append to div:
$("#dialog-modal").append("<p>"+html+"</p>");
    $("#dialog-modal").dialog({         
      height: 140,
      modal: true,
      buttons: {
        Ok: function() {
          $(this).dialog('close');
        }
      }
    }); //dialog
  }//success
});//ajax

注意第一句话：

 $("#dialog-modal").append("<p>"+html+"</p>");

它不能是一个属性。您必须将对象作为参数传递给 dialog() 函数，以便对象的属性或成员如下所示：

 {
 height:140,
 buttons:{},
 anotherPropertie: 'value'
 }

如果在 ajax() 之后调用 dialog() 函数，对话框将为空，因为将在 ajax() 中声明的 success() 函数之前执行。