时间戳

首页 > 解决方案 > 将表单数据和操作发送到 wordpress admin-ajax.php

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

问题描述

我有一个表格，我想将其数据发送到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？

标签： javascriptphpjqueryajaxwordpress

解决方案

您需要将此行从更改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.

推荐阅读