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-＆gt; RequestHandler-＆gt; 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（）函数之前执行。

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

1 个答案: