Ajax 表单提交

Question

我是阿贾克斯的新手。我想通过 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 动作

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

这是我在 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);
}

Answer 2

希望本教程对你有所帮助

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

Answer 3

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

没试过，希望对你有帮助