使用 AJAX 和 PHP 处理 html 表单中的多个输入字段

Question

我有这个表格，但我在尝试测试时收到了http_bad_response (400)。有人可以解释一下吗？

我是这个领域的新手，还在努力改进。另外，我想知道在 PHP 脚本中尝试捕获无线电输入时是否应该区别对待它们。

HTML 表单：

<form id="cform" action="mailer1.php" method="post">
    <div class="form-row">
        <div class="col">
            <input type="text" class="form-control" id="name" placeholder="Nombre" name="name">
        </div>
        <div class="col">
            <input type="text" class="form-control" id="phone" placeholder="Teléfono" name="phone">
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <input type="text" class="form-control" id="email" placeholder="Correo" name="email" required>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <input type="text" class="form-control" id="dim" placeholder="Dirección de inmueble" name="dim">
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <input type="text" class="form-control" id="diudad" placeholder="Ciudad" name="ciudad">
        </div>
        <div class="col">
            <input type="text" class="form-control" id="poblacion" placeholder="Población" name="poblacion">
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <input type="text" class="form-control" id="viviendas" placeholder="N° Viviendas" name="viviendas">
        </div>
        <div class="col">
            <input type="text" class="form-control" id="garajes" placeholder="N° Garajes" name="garajes">
        </div>
        <div class="col">
           <input type="text" class="form-control" id="trasteros" placeholder="N° Trasteros" name="trasteros">
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-4">
            <input type="text" class="form-control" id="viviendas" placeholder="Locales" name="locales">
        </div>
        <div class="col-4">
            <input type="text" class="form-control" id="garajes" placeholder="Ascensores" name="ascensores">
        </div>
        <label class="mr-1" for="ol">Portería:</label>
        <div class="col-1 custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="r1" name="por" value="customEx">
            <label class="custom-control-label" for="r1">Sí</label>
        </div>
        <div class="col-1 custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="r2" name="por" value="customEx">
            <label class="custom-control-label" for="r2">No</label>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <input type="text" class="form-control" id="asunto" placeholder="Asunto" name="asunto">
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <textarea class="form-control" id="ozc" placeholder="Otras zonas comunes" name="ozc" rows="3"></textarea>
        </div>
        <div class="col">
            <textarea class="form-control" id="mensaje" placeholder="Su Mensaje:" name="mensaje" rows="3"></textarea>
        </div>
    </div>   
</div>

<!-- Modal footer -->
<div class="modal-footer">
    <button type="submit" class="btn btn-success">Enviar</button>
</div>
</form>

PHP：

// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Get the form fields and remove whitespace.
    $name = strip_tags(trim($_POST["name"]));
    $name = str_replace(array("\r","\n"),array(" "," "),$name);
    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
    $mensaje = trim($_POST["mensaje"]);
    $phone = trim($_POST["phone"]);
    $dim = trim($_POST["dim"]);
    $ciudad = trim($_POST["ciudad"]);
    $poblacion = trim($_POST["poblacion"]);
    $viviendas = trim($_POST["viviendas"]);
    $garajes = trim($_POST["garajes"]);
    $trasteros = trim($_POST["trasteros"]);
    $locales = trim($_POST["locales"]);
    $ascensores = trim($_POST["ascensores"]);
    $asunto = trim($_POST["asunto"]);
    $ozc = trim($_POST["ozc"]);

    // Check that data was sent to the mailer.
    if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        // Set a 400 (bad request) response code and exit.
        http_response_code(400);
        echo "Oops! There was a problem with your submission. Please complete the form and try again.";
        exit;
    }

    // Set the recipient email address.
    $recipient = "mdrr5545@gmail.com";

    // Set the email subject.
    $subject = "New contact from $name";

    // Build the email content.
    $email_content = "Name: $name\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Message:\n$message\n";

    // Build the email headers.
    $email_headers = "From: $name <$email>";

    // Send the email.
    if (mail($recipient, $subject, $email_content, $email_headers)) {
        // Set a 200 (okay) response code.
        http_response_code(200);

        echo "Thank You! Your message has been sent.";              

    } else {
        // Set a 500 (internal server error) response code.
        http_response_code(500);
        echo "Oops! Something went wrong and we couldn't send your message.";
    }
}
else {
    // Not a POST request, set a 403 (forbidden) response code.
    http_response_code(403);
    echo "There was a problem with your submission, please try again.";
}

Answer 1

由于您要返回自己的 http 状态代码，当您看到 400 时，它可能意味着 真正的 400，即 Apache 说存在客户端数据错误，或者它可能是您自己的PHP 代码返回 400。

所以，让我们先看看第二种情况。在这种情况下，PHP 代码将返回 400：

if (empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {

扫码，$message没有定义，永远为null。这意味着empty($message) 将永远为真，整个测试将永远为真。因此，您将始终看到 400 响应。

注意事项：

• 表单 HTML 无效，有一个不平衡的<div>。您可以使用验证器进行检查，例如 https://validator.w3.org/，或者如果您使用 IDE，它们会有所帮助。

• 我认为返回这样的 http 错误代码不是一个好主意，原因有两个。首先，您无法判断它是真正的 400 错误，还是只是您的代码正在做的事情，这使得调试和维护变得更加困难。其次，这不是 400 响应 according to the spec。请求成功，并带有完全有效的有效负载 - 只是您的应用程序拒绝了它。 400 应该意味着网络/数据层的技术错误。