如何使用 JQuery 和 PHP 通过 POST 提交属性值和表单值？答案

【问题标题】：How to submit attr value and form values with POST using JQuery and PHP?如何使用 JQuery 和 PHP 通过 POST 提交属性值和表单值？
【发布时间】：2016-05-25 19:15:30
【问题描述】：

所以我有一个带有输入框的表单和一个div 类型的 3，单击时会突出显示。我正在尝试让它提交属性和“#email”值并通过 PHP 将其通过电子邮件发送给我。

这是我的 HTML：

<form id="form" name="form" class="custompurchase" action="custom.php" method="post">
    <input type="email" id="email" name="email" maxlength="40" class="textbox2" placeholder="Email address" required/>
    <a class="customoption storage" onclick="activate(this, 'storage');" data-name="500GB HDD">
        ...
    </a>
    <a class="customoption storage" onclick="activate(this, 'storage');" data-name="1TB HDD">
        ...
    </a>
    <a class="customoption storage" onclick="activate(this, 'storage');" data-name="2TB HDD">
        ...
    </a>
</form>

这是我的 JQuery：

$(function() {
    var form = $('#form');
    $(form).submit(function(event) {
        event.preventDefault();
        var email = $("#email").val();
        var storage = $(".customoptionactive.storage").attr("data-name");
        $.ajax({
            type: "POST",
            url: $(form).attr("action"),
            data: email, storage
        })
        .done(function(response) {
            ...
        });
    });
});

最后是我的 PHP：

<?php
    $emailto = "purchases@prismpc.net";
    $subject = "Custom PC";
    $email = $_POST['email'];
    $storage = $_POST['storage'];
    $entire = "Email: ".$email."\n"."Storage: ".$storage;
    mail($emailto, $subject, $entire);
?>

但是，当我看到这封电子邮件时，我得到的只有这些：

Email:
Storage:

我做错了什么？我需要设置dataType吗？非常感谢您的回答！

编辑：与类似问题不同，因为它是一个简单的语法错误。

【问题讨论】：

Send FormData and String Data Together Through JQuery AJAX?的可能重复

标签： javascript php jquery html forms

【解决方案1】：

在$.ajax 上更改data 选项

 data: email, storage

到

 data: {email:email, storage:storage}

【讨论】：

您，先生，是救生员。我已经花了几个小时在这上面，但无法弄清楚。我会尽快接受最佳答案：D
@KyleHorkley 很高兴我能帮上忙。 :)
如果您不介意，您能解释一下这是如何解决的吗？我理解大括号，但是“：”有什么帮助？
@KyleHorkley 因为在您的php 上您通过$_POST['email'] 访问它。您还应该使用email 命名email 值。在正常的提交后将其转换为input，它应该看起来像<input type="text" name="email" value="" />
通常你也可以data : $('Your_form').serialize()

【解决方案2】：

您可能想要使用 FormData 并向其附加自定义数据，正如 manta 在此处指出的那样：Send FormData and String Data Together Through JQuery AJAX?

var formData = new FormData();
formData.append('storage', $(".customoptionactive.storage").attr("data-name"));

$.ajax({
    type: "POST",
    url: $(form).attr("action"),
    data: formData
})
.done(function(response) {
    ...
});

这将节省您手动添加这些输入值的时间

【讨论】：