将表单数据和操作发送到 wordpress admin-ajax.php答案

【问题标题】：Sending form data and action to wordpress admin-ajax.php将表单数据和操作发送到 wordpress admin-ajax.php
【发布时间】：2018-09-08 08:07:38
【问题描述】：

我有一个表单，我想将其数据发送到admin-ajax：

<form method="POST" id="form">
    <input type="text" name="name">
    <input type="number" name="phone">
    <input type="email" name="email">
    <textarea name="overview"></textarea>
    <input type="submit" name="submit" id="submit" value="Submit">
</form>

使用 Ajax 发送数据的 Javascript/jQuery 代码：

document.getElementById('submit').addEventListener('click', function(e){
    e.preventDefault();
    var form_data = $('#form').serialize();
    $.ajax('http://mywebsite.com/wordpress/wp-admin/admin-ajax.php', {
        method: "POST",
        data: form_data + {action: 'my_action'},
        success: function (response) {
            console.log(response);
        },
        error: function (err) {
            console.log('Error:' + err);
        }
    });
});

也试过formData:

var form_data = new FormData();
form_data.append('form', $('#custom').serialize());
form_data.append('action', 'my_action');

如何发送表单数据和动作my_action？

【问题讨论】：

标签： javascript php jquery ajax wordpress

【解决方案1】：

您需要将此行从 data: form_data + {action: 'my_action'}, 更改为 data: {action: 'my_action', form_data:form_data},

jQuery(document).on("click","#submit", function(){
    e.preventDefault();
    var form_data =jQuery('#form').serializeArray();
    jQuery.ajax('http://mywebsite.com/wordpress/wp-admin/admin-ajax.php', {
        method: "POST",
        data: {action: 'my_action', form_data:form_data},
        success: function (response) {
            console.log(response);
        },
        error: function (err) {
            console.log('Error:' + err);
        }
    });
});

并将输入类型 submit 更改为 button。

【讨论】：

为什么要将输入类型改为按钮？
如果你想使用ajax不需要使用提交按钮
如果您使用提交按钮，您可以在$_POST上获取值
如果这些输入之一是图像<img src="data:image/png;base64,iVBORw0KGgo==" name="picture"> 怎么办？，我删除了一些 src 代码，因为它很长
试试这样var form_data = $('#form').serializeArray(); form_data .push({ name: "<something>", value: "<somevalue>" });

【解决方案2】：

一般来说我更喜欢使用这种方式，就像在你的情况下你使用的是提交类型按钮：

$(document).on('click', '#submit', function(){ // the id of your submit button
     var form_data = $('#your_form_data_id'); // here is the id of your form
     form_data.submit(function (e) {
        var my_action = "my_action";
        e.preventDefault();
           $.ajax({
              type: form_data.attr('method'), // use this if you have declared the method in the form like: method="POST"
              url: form_data.attr('action'), // here you have declared the url in the form and no need to use it again or you can also use the path like in your code
              data: form_data.serialize() +'&'+$.param({ 'my_action': my_action}), // here you are sending all data serialized from the form and appending the action value you assing when declare var my_action
              success: function (data) {
                    // after the success result do your other stuff like show in console, print something or else
              },
           });
      });
 });

希望对您有所帮助。如果有什么不清楚的可以随时提问，我会在 cmets 中解释。

【讨论】：

【解决方案3】：

您应该只将表单传递给 new FormData() 所以在您提交表单时只需传递 new FormData(e.target);

希望对你有帮助

【讨论】：