Question

我是Ajax的新手。我想通过Ajax提交表单并保存发送到数据库的数据。

像Facebook状态更新之类的东西 - 文本区域被禁用然后被提交。一旦它保存在数据库中，它就会返回并更新顶部的状态消息。并再次启用文本区域。

这是我的表格

  <?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 Action

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);
}

Ajax表单提交

3 个答案: