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"}]
  }
});

这行不通。

jQuery的ajax的data属性应包含键值对，如下所示：

$.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'];

但是，我不建议这样做。

如何定义AJAX动作？

1 个答案: