代码之家 › 专栏 › 技术社区 › Harsha M V

Ajax表单提交

cakephp-1.3 jquery cakephp ajax

0

Harsha M V · 技术社区 · 14 年前

我是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作用

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

3 回复 | 直到 7 年前

1

3

riotera 14 年前

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

我没试过,但我希望它能帮助你

2

mohamed diab 13 年前

希望本教程能有所帮助

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

3

0

Zachary Heaton 7 年前

这是我在cakephp 3.x中提交表单时使用的一个函数,它使用了sweet alerts,但可以改为普通的alert。它是非常可变的,只需在控制器中放置一个动作来捕获表单提交。此外,位置重新加载将重新加载数据,以向用户提供即时反馈。可以拿出来。

$('#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);
}