Ajax Форма отправки

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