CakePHP4-使用Ajax创建记录

问题描述

我是CakePHP的新手，我想弄清楚如何添加一个可以使用ajax发布到另一个db表的表单，真是太费劲了。基本上，我有一个可以进行搜索的表格，但是工作正常，但是在用户执行搜索之前，我需要捕获他的电子邮件和其他字段并将它们存储在数据库的单独表中。

虽然我已经能够设置表格并将数据发送到控制器，但我却无法克服错误400 /错误的请求。我不确定是否是因为我将发布网址设置错误（已启用：$ this-> loadComponent（'FormProtection'）;

任何帮助或指导将不胜感激！！我一直无法弄清楚，也许我正在错误地解决问题，或者我应该使用发布链接（如果可能的话）。

我当前拥有的设置：

index.PHP => website.com/app/services:

<div id="user_basics"> 
<?= $this->Form->create() ?>
<fieldset>
    <legend><?= __('Add Visitor') ?></legend>
    <?PHP
        echo $this->Form->control('name');
        echo $this->Form->control('email');
        echo $this->Form->control('city');
    ?>
</fieldset>
<?= $this->Form->button(__('Submit')) ?>
<?= $this->Form->end() ?>
</div>

jQuery: 
$('#user_basics form').submit(function(event) {
    
var ajaxdata = $("#user_basics form").serializeArray();

event.preventDefault();

    $.ajax({
        url:"<?= $this->Url->build(["controller" => "visitors","action" => "addExternal"]); ?>",type:"POST",headers: $('[name="_csrftoken"]').val(),data:ajaxdata,dataType: "json",success:function(response) {
            console.log(response);
            console.log("success");
        },error: function(response) {
            console.error(response.message,response.title);
            console.log("nope");
        }
    });

});

我没有在addExternal动作中包含控制器文件。

注意：我指的是访问者控制器，我认为这是正确的方法-将用户的数据发送到已经设置为连接到数据库的访问者控制器）

解决方法

一个简单的错误

var ajaxdata = $("#user_basics form").serializeArray();

您正在尝试从具有“ user_basics表单”的表单中序列化数组。 在此，id“ user_basic”可能具有多种形式。 所以最好用id创建表单

<?= $this->Form->create(null,[
           'id'=>'user_basic_form',]) ?>

var ajaxdata = $("#user_basic_form").serializeArray();

,

因此，在浏览日志时，我发现csfr / formprotection不能同时使用，并且在此过程中可能还存在其他一些错误。这就是现在的工作方式，尽管我很好奇这是否是最佳路线。

我有2个桌子，服务和访客。在服务索引上，我需要能够在Visitors表中创建一条记录（我将在其中存储用户的电子邮件/数据，以便他们进行搜索）。

VisitorsController：

public function initialize(): void {
        parent::initialize();
        $this->loadComponent('RequestHandler');   
        $this->loadComponent('FormProtection');
    }
    public function beforeFilter(EventInterface $event){
        parent::beforeFilter($event);
        $this->FormProtection->setConfig('unlockedActions',['userinfo']);
    }

    public function userinfo(){
        // $this->autoRender = false;
        if ($this->request->is('ajax')) {
            $this->response = $this->response->withDisabledCache();
        }
        
        $visitor = $this->Visitors->newEmptyEntity();
        if ($this->request->is('post')) {
            $visitor = $this->Visitors->patchEntity($visitor,$this->request->getData());

            if ($this->Visitors->save($visitor)) {}
        }
        $this->set(compact('visitor')); 
    } 

游客索引：

<div id="user_basics"> 
<?= $this->Form->create() ?>

<fieldset>
    <legend><?= __('Add Visitor') ?></legend>
    <?php
        echo $this->Form->control('name');
        echo $this->Form->control('email');
        echo $this->Form->control('city');
    ?>
</fieldset>
<?= $this->Form->button(__('ok')) ?>
<?= $this->Form->end() ?>
</div>

<script>
$(document).ready(function () {
    
    
    $('#user_basics form').submit(function(event){
        
        var $form = $(this);
        var $target = $('div.response');
        var csrf = $('input[name=_csrfToken]',$form).val();
        var data =  $(this).serialize();

        $.ajax({
            method: "POST",url: "http://dev.cts.cl/app/visitors/userinfo/",beforeSend: function(xhr) {
                xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                xhr.setRequestHeader('X-CSRF-Token',csrf);
            },data: data,dataType: "json"
        })
        
        console.log("000-o");

        event.preventDefault();
    }); 
});
</script>

我不高兴必须关闭表格安全性，希望我能找到正确的方法。我也想从我的控制器类返回响应，但也没有弄清楚（从我在线发现的错误500）。