如何使用 Ajax .serialize() 数据将表单发布到 PHP？

How to post a form to PHP using Ajax .serialize() data?

提问by Greg L

I am using WordPress and cannot figure what to do with the serialized data from Ajax after it is sent over. I have read on this site that parse_stris what I need, but I am unsure how to make use of it.

我正在使用 WordPress，但无法确定从 Ajax 发送的序列化数据后如何处理。我在这个网站上读到parse_str了我需要的东西，但我不确定如何使用它。

Here is the jQuery for the Form Submit

这是表单提交的 jQuery

jQuery( document ).ready( function( $ ) { 
    $( '#log_data' ).submit( function( event ) { 
        event.preventDefault(); 
        console.log( $( this ).serialize() );

        var data = $(this).serialize();
        action = 'my_submit_log_action';
        $.post( 
            ajaxurl, 
            data,
            function ( response ) { 
                if ( ! response.success ) { 
                    alert( 'Failure!' ); 
                } 
                alert( 'Success!' );                          
            } 
        ); 
    }); 
});

Because this is in WordPress, I have to pass an action so WordPress knows what function to pass this data to. I am not sure if I am passing the action right (see above).

因为这是在 WordPress 中，所以我必须传递一个动作，以便 WordPress 知道将这些数据传递给哪个函数。我不确定我是否正确地通过了行动（见上文）。

The second part is the PHP, which is what I do not understand. How do I take the serialized data and post it to the database?

第二部分是PHP，这是我不明白的地方。如何获取序列化数据并将其发布到数据库？

add_action('wp_ajax_my_submit_log_action', 'my_submit_log_action');
add_action('wp_ajax_nopriv_my_submit_log_action', 'my_submit_log_action');
function my_submit_log_action() {
    global $wpdb;

    $user_id = $_POST['user_id'];
    $length = $_POST['length'];
    $ground = $_POST['ground'];
    $date = $_POST['date'];
    $notes = $_POST['notes'];

    $wpdb->insert('wp_jo_plugin_options', array (
        'user_id' => $user_id,
        'length'  => $length,
        'ground'  => $ground,
        'date'    => $date,
        'notes'    => $notes,
    ) );

    die();
}

回答by Ali Exalter

Serialise form data after submission into

提交后序列化表单数据

<input type="hidden" value="<?php echo base64_encode(serialize($_POST)); ?>" name="posted" />

then in ajax send this data via POST. OR you can use this --------

然后在 ajax 中通过 POST 发送此数据。或者你可以使用这个--------

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() ); //serialize form on client side
  var pdata = {
     action: "ajaxFunction",
     postdata: $(this).serialize()
  }
  $.post( "<?php echo admin_url('admin-ajax.php'); ?>", pdata, function( data ) {
       $( ".result" ).html( data );
  });
});

回答by brasofilo

There are many issueswith your code: security, script enqueueing and localization, front-end connection, data encoding, response handling. Try to adapt it to the following examples : [ 1 ]and [ 2 ].

您的代码存在许多问题：安全性、脚本排队和本地化、前端连接、数据编码、响应处理。尝试使其适应以下示例：[1]和[2]。

But, to make your sample code work (in the backend only, unless you hardcode the ajaxurl):

但是，要使您的示例代码工作（仅在后端，除非您对 进行硬编码ajaxurl）：

var data = {
    values: $(this).serializeArray(), // <--- Important
    action: 'my_submit_log_action'
}

回答by maheshwaghmare

Try serialize()or unserialize()

尝试serialize()或unserialize()

• WordPress has a few helper functions that we use instead of serialize()and unserialize()— maybe_serialize()and maybe_unserialize().

• WordPress 有一些我们使用的辅助函数来代替serialize()and unserialize()—maybe_serialize()和maybe_unserialize()。

E.g.

例如

// 'serialize' the data
update_option( '_option_data', serialize( array( 'foo', bar' ) ) );

// 'unserialize' the data
unserialize( get_option( '_option_data' ) );

https://codex.wordpress.org/Function_Reference/maybe_unserialize

https://codex.wordpress.org/Function_Reference/maybe_unserialize

Convert and store data in serialized as below:

转换和存储序列化数据如下：

add_action('wp_ajax_my_submit_log_action', 'my_submit_log_action');
add_action('wp_ajax_nopriv_my_submit_log_action', 'my_submit_log_action');
function my_submit_log_action() {
    global $wpdb;

    // DEFINE AN ARRAY
    $optionArray = [];

    $user_id = $_POST['user_id'];
    $length = $_POST['length'];
    $ground = $_POST['ground'];
    $date = $_POST['date'];

    // PASS TO ARRAY
    if(isset($user_id) && !empty($user_id){
         $optionArray['user_id'] = $user_id; 
    }
    if(isset($length ) && !empty($length ){
         $optionArray['length'] = $length;
    }
    if(isset($ground ) && !empty($ground ){
         $optionArray['ground'] = $ground;
    }
    if(isset($date ) && !empty($date ){
         $optionArray['date'] = $date;
    }

    // OUTPUT AS SERIALIZED - BOTH ARE SAME
    // echo 'maybe_serialize: '. maybe_serialize( $optionArray );
    // echo 'serialize: '. serialize( $optionArray );

    // INSERT IN DATABASE - HERE USED maybe_serialize()
    $wpdb->insert('wp_jo_plugin_options', maybe_serialize( $optionArray ) );

    die();
}

回答by Moeed Farooqui

The .serialize()method creates a text string in standard URL-encoded notation.

该.serialize()方法在标准中创建一个文本字符串URL-encoded notation。

It can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>.

它可以充当已经选择个别表单控件，诸如jQuery对象上<input>，<textarea>和<select>。

$user_id = $_POST['user_id'];
//Make sure here user_id will be the name attribute of your text field