javascript - 通过 AJAX 将 HTML 转换为 PHP 表单输入

Question

我想从 html 表单中获取输入，并通过我的 JavaScript 将它们发送到 PHP。基本上我有一个非常简单的 html 表单，我想获取它的输入并使用 JavaScript 将它们发送到 PHP，因为我正在使用 AJAX。

问题是，每当我填写并提交表单时，它只会向我发送一封电子邮件，但没有表单中的值 - 正是我在 PHP 中已有的值。

HTML 代码

<!-- CONTACT FORM START -->
<form id="contact-form" class="fade-up" method="post" action="">
    <div class="row">

        <!--NAME FIELD-->
        <div class="col-md-6">
            <input type="text" id="cf-name" class="input__field cf-validate" name="name" placeholder="Name">
        </div>

        <!--EMAIL FIELD-->
        <div class="col-md-6">
            <input type="text" id="cf-email" class="input__field cf-validate" name="email" placeholder="Email">
        </div>

        <!--MESSAGE BOX-->
        <div class="col-md-12">
            <textarea id="cf-message" class="input__field cf-validate" rows="8" name="message" placeholder="Your Message"></textarea>
        </div>

        <div class="alert-container col-md-12"></div>

        <!--SUBMIT BUTTON-->
        <div class="col-md-12">
            <button type="submit" id="cf-submit" name="subind" class="main-btn cursor-link">Send as an individual</button>

            <button type="submit" id="cf-submit" name="subbiz" class="main-btn cursor-link">Send as a business</button>
        </div>

    </div>
</form>
<!-- CONTACT FORM END -->

Javascript 代码

$(document).ready(function() {
    $('form').submit(function (event) {
        event.preventDefault()
        
        var name = document.getElementById('cf-name').value
        var email = document.getElementById('cf-email').value
        var msg = document.getElementById('cf-message').value
        
        //make a post request by AJAX
        
        $.post("mail.php",{name:name,email:email,msg:msg},function(data){
            console.log(data)
        })
    })
})

PHP 代码

<?php
    $name = $_POST['name'];echo $_POST['name'];
    $email = $_POST['email'];echo $_POST['email'];
    $message = $_POST['msg'];echo $_POST['msg'];
    $subject = "Client Mail - Individual";
    $to = "clients@growpile.com";
    $headers = "From: ".$email;
    $txt = "Name: ".$name." - Individual"."\n"."From: ".$email."\n\n".$message."\n\n".$ind;

    mail($to, $subject, $txt, $headers);
?>

Answer 1

调整您的表单，使其没有关联的操作，这是为了防止表单在 Javascript 执行之前提交 POST 请求。

<!-- CONTACT FORM START -->
<form id="contact-form" class="fade-up">
    <div class="row">

        <!--NAME FIELD-->
        <div class="col-md-6">
            <input type="text" id="cf-name" class="input__field cf-validate" name="cf-name" placeholder="Name">
        </div>

        <!--EMAIL FIELD-->
        <div class="col-md-6">
            <input type="text" id="cf-email" class="input__field cf-validate" name="cf-email" placeholder="Email">
        </div>

        <!--MESSAGE BOX-->
        <div class="col-md-12">
            <textarea id="cf-message" class="input__field cf-validate" rows="8" name="ccf-message" placeholder="Your Message"></textarea>
        </div>

        <div class="alert-container col-md-12"></div>

        <!--SUBMIT BUTTON-->
        <div class="col-md-12">
            <button type="submit" id="cf-submit" name="subind" class="main-btn cursor-link">Send as an individual</button>

            <button type="submit" id="cf-submit" name="subbiz" class="main-btn cursor-link">Send as a business</button>
        </div>

    </div>
</form>

您可以使用 JQuery 的 val() 函数获取 HTML 字段的输入。

$(document).ready(function() {
    $('form').submit(function (event) {
        event.preventDefault()
        
        var name = $("#cf-name").val();
        var email = $("#cf-email").val();
        var message = $("#cf-message").val();
        
        // Make a post request by AJAX.
        $.post("mail.php", {name: name, email: email, message: message}, function(data) {
            console.log(data);
        });
    });
});

至于您的服务器端 POST 请求处理程序，您使用 filter_input 从 POST 请求中获取输入变量索引下的函数。

<?php
    $name = filter_input(INPUT_POST, "name");
    $email = filter_input(INPUT_POST, "email");
    $message = filter_input(INPUT_POST, "message");

    // Print the information from the form received.
    echo "Name: " . $name . "\n";
    echo "Email: " . $email . "\n";
    echo "Message: " . $message;

    $subject = "Client Mail - Individual";
    $to = "clients@growpile.com";
    $headers = "From: " . $email;
    $txt = "Name: " . $name . " - Individual" . "\n" . "From: " . $email . "\n\n" . $message . "\n\n" . $ind;

    mail($to, $subject, $txt, $headers);
?>