首页 > 解决方案 > Cakephp 3.6:通过 ajax 提交表单

问题描述

我有这个表格:

<?php
                    // Start a modal with a title, default value for 'close' is true
                    echo $this->Modal->create("My Modal Form", ['id' => 'exampleFormModalzz', 'close' => false]) ;

                    echo $this->Form->create($task, ['id' => 'newTaskForm']) ?>
                    <fieldset>
                        <legend><?= __('Add Task') ?></legend>
                        <?php
                             echo $this->Form->control('customer', ['id' => 'Autocomplete', 'empty' => false, 'required' => true]);
                             echo $this->Form->control('name', ['label' => 'Title','autocomplete' => 'off']);
                             echo $this->Form->control('instructions');
                             ?>
                    </fieldset>
                    <?php echo $this->Modal->end([  

                     $this->Form->submit(__('Direct Assign'), ['id' => 'DAbtn', 'name' => 'btn', 'class' => 'button' ]),
                     $this->Form->submit(__('Save as pending'), ['id' => 'SPbtn', 'name' => 'btn', 'class' => 'button' ]) 
                     ]); ?>

我想以 json 格式提交带有数据的表单。所以我尝试了jquery

<script type="text/javascript">
    $(document).ready(function(){
        $('#newTaskForm').submit(function(){
            var task = $(this).serialize();
            source: function( request, response ) {
                $.ajax({
                    type: "POST",
                    url: '/app/tasks/createTask',
                    datatype: 'json',
                    data: task,
                    success: function( data )
                    {

                    }
                });
            }

            return false;
        });
    });
</script> 

但它不断通过发布请求发布表单。它不通过 ajax 提交。我该如何解决?

标签: jqueryajaxpostcakephpsubmit

解决方案


您可以将提交按钮替换为常规按钮,并使用 onClick 调用 ajax。

例子:

$this->Form->button('Direct Assign', ['id' => 'DAbtn', 'name' => 'btn', 'class' => 'button' ]);

在阿贾克斯:

$("#DAbtn").click(function () {
        var task = $("#newTaskForm").serialize();
        source: function( request, response ) {
            $.ajax({
                type: "POST",
                url: '/app/tasks/createTask',
                datatype: 'json',
                data: task,
                success: function( data )
                {

                }
            });
        }

推荐阅读