阿賈克斯表格提交

Question

我是新來的阿賈克斯。我想通過Ajax提交表單並保存發送到數據庫的數據。

類似Facebook狀態更新 - 其中文本區域被禁用，然後submited。一旦它保存在數據庫中，它會返回並更新頂部的狀態消息。並再次啓用文本區域。

這是我的形式

<?php echo $form->create('StatusMessage', array('type' => 'post', 'url' => '/account/updateStatus', 'id' => 'updateStatus')); ?> 
    <?php echo $this->Form->input('id', array('value' => $user['User']['id'],'type' => 'hidden')); ?> 
    <?php echo $this->Form->textarea('message', array('value' => 'What have you been eating ?')); ?> 

編輯：由0 RioTera建議修改

CakePHP的行動

function updateStatus() { 

    $this->autoRender = false; 
    if($this->RequestHandler->isAjax()) { 
     $this->layout = 'ajax'; //THIS LINE NEWLY ADDED 

     $this->data['StatusMessage']['pid'] = 0; 
     $this->data['StatusMessage']['commenters_item_id'] = $this->data['StatusMessage']['item_id'] = $this->User->Item->itemId('1', $this->data['StatusMessage']['id']); 
     unset($this->data['StatusMessage']['id']); 
     //debug($this->data); 

     if($this->User->Item->StatusMessage->save($this->data)) { 
     return true; 
     } else { 
      echo 'not saved'; 
     } 
    } else { 
     echo 'no'; 
    } 

} 

Javascript代碼

$(document).ready(function() { 
    var options = { 
     target: '#output2', 
     // target element(s) to be updated with server response 
     beforeSubmit: showRequest, 
     // pre-submit callback 
     success: showResponse, // post-submit callback 
     // other available options: 
     //url:  url   // override for form's 'action' attribute 
     //type:  type  // 'get' or 'post', override for form's 'method' attribute 
     //dataType: null  // 'xml', 'script', or 'json' (expected server response type) 
     clearForm: true  // clear all form fields after successful submit 
     //resetForm: true  // reset the form after successful submit 
     // $.ajax options can be used here too, for example: 
     //timeout: 3000 
    }; 

    $('#updateStatus').submit(function() { 
     // make your ajax call 
     $(this).ajaxSubmit(options); 
     return false; // prevent a new request 
    }); 

    function showRequest(formData, jqForm, options) { 
     $('#StatusMessageMessage').attr('disabled', true); 
    } 

    function showResponse(responseText, statusText, xhr, $form) { 
     $('#StatusMessageMessage').attr('disabled', false); 
     alert('shdsd'); 
    } 
}); 

Answer 1

使用jQuery和http://jquery.malsup.com/form/插件：

$(document).ready(function() { 
    var options = { 
     target:  '#message', // target element(s) to be updated with server response 
     beforeSubmit: showRequest, // pre-submit callback 
     success:  showResponse // post-submit callback 
    }; 
    $('#updateStatus').ajaxForm(options); 
}); 

function showRequest(formData, jqForm, options) { 
    $('#StatusMessageMessage').attr('disabled', true); 
} 

function showResponse(responseText, statusText, xhr, $form) { 
    $('#StatusMessageMessage').attr('disabled', false); 
} 

我沒有嘗試，但我希望它可以幫助你

Answer 2

我希望本教程將幫助

http://mohammed-magdy.blogspot.com/2010/10/ajaxformsubmitter.html

Answer 3

這是一個函數我用來在cakephp 3.x中提交表單，它使用甜蜜的警報，但可以更改爲正常警報。這是非常可變的，只需在控制器中添加一個動作來捕獲表單提交。此外，位置重新加載將重新加載數據以給用戶即時反饋。這可以拿出來。

$('#myForm').submit(function(e) { 
    // Catch form submit 
    e.preventDefault(); 

    $form = $(this); 
    // console.log($form); 
    // Get form data 
    $form_data = $form.serialize(); 
    $form_action = $form.attr('action') + '.json'; 
    // Do ajax post to cake add function instead 
    $.ajax({ 
     type : "PUT", 
     url : $form_action, 
     data : $form_data, 
     success: function(data) { 
      swal({ 
       title: "Updated!", 
       text: "Your entity was updated successfully", 
       type: "success" 
      }, 
      function(){ 
        location.reload(true); 
      }); 
     } 
    }); 
}); 

這是一個簡單的動作在控制器中的樣子;

public function updateEntity($id = null){ 
    $entity = $this->EntityName->get($id); 
    $entity = json_encode($this->request->data); 
    $this->EntityName->save($entity); 
}