Как определить действие AJAX?

Question

Я создаю форму, которая отправляет с помощью AJAX, а затем использует $ _POST, чтобы получить значения формы и ввести их в базу данных.Но я не понимаю, почему я должен был определить действие внутри ввода в моей форме, обычно я просто определял его внутри моего js.Но если я сделаю это, я не смогу получить доступ к данным $ _POST.Может кто-нибудь объяснить, почему это происходит.

Вот мой код, который работает;

js

jQuery(document).ready(function($){
    jQuery('#add_event_form').on('submit', function(e){
        e.preventDefault();
        var form = $(this);
        var form_data = form.serializeArray();

        $.ajax({
            url: ajax_url,
            type: 'post',
            data: form_data,
            error : function(response){
                console.log(response);
            },
            success : function(response){

            }
        });
    });
});

php

<?php
    add_action('wp_ajax_nopriv_add_event', 'add_event');
    add_action('wp_ajax_add_event', 'add_event');

    function add_event(){
        global $current_user;
        global $wpdb;
        $user_id = $current_user->ID;

        $event_name = sanitize_text_field($_POST['event_name']);

        $wpdb->insert('wp_events', array(
            'user_id' => $user_id,
            'event_name' => $event_name,
        ) ); 

        die(); 
    }
?>

html

<form action="" method="POST" id="add_event_form">
    <h3>ADD EVENT</h3>

    <div class="form_row">
        <label>Event Name
            <input type="text" name="event_name" class="event_name required">
        </label>
    </div>

    <input type="hidden" name="action" value="add_event">
</form>

И вот как я обычно определяю свое действие, почему это не работает?

jQuery(document).ready(function($){
    jQuery('#add_event_form').on('submit', function(e){
        e.preventDefault();
        var form = $(this);
        var form_data = form.serializeArray();

        $.ajax({
            url: ajax_url,
            type: 'post',
            // data: form_data,
            data: { 
                action: 'add_event',
                data: form_data,  
            },
            dataType: 'json',
            error : function(response){
                console.log(response);
            },
            success : function(response){

            }
        });
    });
});

Это еще не конец, поэтому прошу прощения за любые проблемы с безопасностью и т. Д.

Answer 1

В вашем JavaScript есть data: form_data, который представляет собой массив, содержащий объекты, подобные этому {name: "event_name", value: "test"}.Что приведет к следующему:

$.ajax({
  url: ajax_url,
  type: 'post',
  data: {
    action: 'add_event',
    data: [{name: "event_name", value: "test"}]
  }
});

Это не сработает.

---

Свойство data в ajax jQuery должно содержать пары ключ-значение, например:

$.ajax({
  url: ajax_url,
  type: 'post',
  data: {
    action: 'add_event',
    event_name: 'test'
  }
});

---

Редактировать: если вы не хотите изменять свой код JavaScript, вы также можете получить данные в PHP, используя:

$data = $_POST['data']; // the 'data' array from jQuery's ajax call
$event_name = $data['event_name'];

Однако я не рекомендую делать этотаким образом.