Javascript Ajax脚本不适用于CakePhp表单

因此，我在add.ctp操作中有这段代码，我希望它在提交此表单后加载另一个div，但由于我对CakePHP3和Ajax非常陌生，我无法找出是什么原因导致脚本无法工作，我页面上的jQuery工作正常，但脚本中的日志不会显示在控制台中。我可能遗漏了一些非常明显的内容，但我需要您的Anwser

      <?php
      echo $this->Form->create($article, ['id' => 'ajaxform']);
      echo $this->Form->input('title',array('class'=`enter code here`>'form-control'));
      echo $this->Form->input('body', ['rows' => '3','class'=>'form-control']);
      echo '<p></p>';
      echo $this->Form->button(__('Salvar artigo'),array('class'=>'btn btn-success', 'id' => 'butao'));
      echo $this->Form->end();
      ?>


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript">
      console.log("test");
      $(document).ready(function(){
        $('#butao').click(function(e){
          console.log("teste2");
          $("#ajaxform").submit();
          e.preventDefault;
            $(".content-wrapper").load("main #main");
        });

        $("#ajaxform").on('submit',function(e)
        {
          console.log("teste");
            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            $.ajax(
            {
                url : formURL,
                type: "POST",
                data : postData,
                success:function(data, textStatus, jqXHR)
                {
                  $('#main').html(data);
                    //data: return data from server
                },
                error: function(jqXHR, textStatus, errorThrown)
                {
                    //if fails
                }
            });
            e.preventDefault(); //STOP default action
            e.unbind(); //unbind. to stop multiple form submit.
        });

        $("#ajaxform").submit(); //Submit  the FORM


      });
      </script>

--编辑-- 我要添加的主页代码

<?php foreach ($articles as $article): ?>
  <tr>
      <td><?= $article->id ?></td>
      <td>
          <?= $this->Html->link($article->title, ['action' => 'view', 
$article->id]) ?>
      </td>
      <td>
          <?= $article->created->format(DATE_RFC850) ?>
      </td>
      <td>
            <?= $this->Form->postLink(
                'Apagar',
                ['action' => 'delete', $article->id],
                ['confirm' => 'Têm a certeza?','class'=>'btn-danger btn-sm'])

            ?>
          <?= $this->Html->link('Editar', ['action' => 'edit', $article->id],array('class'=>'btn-warning btn-sm')) ?>
          <?= $this->Html->link('Copiar', ['action' => 'copy', $article->id],array('class'=>'btn-warning btn-sm')) ?>
      </td>
  </tr>
  <?php endforeach; ?>
</table>
</div>
<button id="add" class="btn btn-primary btn-xs">
    <h6>Adicionar Artigo</h6>
    <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
    <script>
    $(document).ready(function(){
      $('#add').click(function(){
          $("#main").load("add #addctp");
      });
    });
    </script>
  </button>

阿蒂戈酒店
$（文档）.ready（函数（）{
$（'#添加'）。单击（函数（）{
$（“#main”）.load（“add#addctp”）；
});
});

您应该从控制器返回json

为此：

在app/Config/routes.php中添加：

Router::extensions(['json']);

启用json扩展

在控制器中添加：

public function initialize()
{
    parent::initialize();
    $this->loadComponent('RequestHandler');
}

启用内容类型上的自动视图类切换

更改

$this->set（'article'，$article）至：

$this->set(compact('article'));
$this->set('_serialize', ['article']);

如果在将数据转换为
json/xml
之前不需要进行任何自定义格式设置，则可以跳过为控制器操作定义视图文件

现在您可以请求带有json扩展名的
ArticlesController:：add（）
，然后您的操作将
$article
序列化为json

最后创建
app/webroot/js/Articles.js
：

Articles = {
    init: function () {
        this.add();
    },

    add: function(){
        $( "#ajaxform" ).submit(function( event ) {

            var that    = $(this),
                data    = that.serializeArray(),
                formURL = $('#ajaxform').attr('action') + '.json';

            event.preventDefault();

            $.ajax(
            {
                url: formURL,
                dataType: 'JSON',
                type: 'POST',
                data: data,
                success: function(data,text,xhr)
                {
                    console.log(data);
                },
                error: function()
                {

                },
                complete: function ()
                {

                }
            });


        });
    }
};

$(document).ready(function () {
    Articles.init();
});

并在您的观点中包括：

<?= $this->Html->script('Articles', ['block' => true]); ?>



另见：





您的表单操作在哪里？在我的控制器中。我不知道是否是因为CakePHP3，而是因为Router:：parseExtensions（'json'）；给出错误：调用未定义的方法Cake\Routing\Router:：parseExtensions（），并将代码放入无限循环。对不起，我已经为CakePHP 2.x编写了答案，我将更新。$this->set（“\u serialize'，['article']）；parentesis中出现语法错误，如果我将其取下，则会出现错误：无法取消设置字符串偏移量。@DanielPereira修复了将实际代码作为问题信号的一部分添加为编辑
<?= $this->Html->script('Articles', ['block' => true]); ?>