通过 Ajax 将表单数据传递到 PhP答案

【问题标题】：Pass form data via Ajax into PhP通过 Ajax 将表单数据传递到 PhP
【发布时间】：2020-09-08 12:02:01
【问题描述】：

我有一个同时使用文本字段和上传字段的表单。

<form action="submit" method="post" enctype="multipart/form-data">
<input type="text" name="textfield">
<input type="file" name="file_upload">
<button type="submit">Submit</button>
</form>

如何通过 ajax 传递所有插入的数据并使用 PhP 中的数据？

我目前通过 ajax 尝试的是：

var fd = new FormData($('form'));

$.ajax({
     url: ajaxurl,
     type: 'POST',
     processData: false,
     contentType: false,
     data: {
           fd: fd,
           action: 'devplus_submit_annex' // a php function
    },
    success: function(response) {
           JSON.parse(response);
    },
    error: function(response) {
           console.log('Error');
    }
});

【问题讨论】：

您遇到问题了吗？请列出您面临的任何错误
你的 action 属性应该指向 php 文件 action="name_of_php_file.php" 并且你的 Javascript 代码应该可能会阻止表单的默认行为
@JackSparrow 我的 admin-ajax 出现“400 bad request”错误。我这样写：var ajaxurl = 'domain.be/wp-admin/admin-ajax.php';
FormData 已经创建了一个完整的表单提交数据集，您不能将其“包装”在额外的参数名称下（就像您使用 fd: fd 所做的那样），然后期望 PHP 能够理解结果数据.这需要在你的AJAX调用中只是data: fd，如果你需要在这个表单数据集中添加额外的参数，那么你需要使用developer.mozilla.org/en-US/docs/Web/API/FormData/append
@CBroe 好的，我在哪里定义“操作：'devplus_submit_annex'”？

标签： php ajax forms

【解决方案1】：

FormData 构造函数接受一个 HTMLFormElement 作为它的参数，你传递了一个 jQuery 对象。
对于 jQuery.ajax，您将表单数据对象单独作为数据字段传递
如果需要在 from 之外添加数据，可以使用 append() 方法。

var fd = new FormData($('form')[0]);
fd.append('action', 'devplus_submit_annex');
$.ajax({
     url: ajaxurl,
     type: 'POST',
     processData: false,
     contentType: false,
     data: fd,
    success: function(response) {
           JSON.parse(response);
    },
    error: function(response) {
           console.log('Error');
    }
});

【讨论】：