Question

我是ajax / js / php的新手。我有一个小联系表格

<form id="contact-form" method="post" action="process.php" role="form">
    <div class="messages"></div>
    <div class="form-group">
        <label for="form_name">First name *</label>
        <input id="form_firstname" type="text" name="name" class="form-control" placeholder="Please enter your first name *" required="required" data-error="Firstname is required.">
        <div class="help-block with-errors"></div>
    </div>
    <div class="form-group">
        <label for="form_lastname">Last name *</label>
        <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your last name *" required="required" data-error="Lastname is required.">
        <div class="help-block with-errors"></div>
    </div>
    <div class="form-group">
        <label for="form_email">Email *</label>
        <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
        <div class="help-block with-errors"></div>
    </div>
    <div class="form-group">
        <label for="form_phone">Phone</label>
        <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
        <div class="help-block with-errors"></div>
    </div>
    <p><strong>*</strong> These fields are required.</p>
</form>
<button type="submit" class="btn btn-info" value="Create Account">Create Account</button>

小js和php

的script.js

$("#contact-form").submit(function(event) {
    // cancels the form submission
    "use strict";
    event.preventDefault();
    submitForm();
});

function submitForm() {
    // Initiate Variables With Form Content
    "use strict";
    var firstname = $("#form_firstname").val();
    var lastname = $("#form_lastname").val();
    var email = $("#email").val();
    var phone = $("#phone").val();

    $.ajax({
        type: "POST",
        url: "process.php",
        data: "name=" + firstname + lastname + "&email=" + email + "&phone=" + phone,
    });
}

process.php

<?php
    $name = $_POST["name"];
    $email = $_POST["email"];
    $phone = $_POST["phone"];

    $EmailTo = "name@email.com";
    $Subject = "New Message Received";

    // prepare email body text
    $Body .= "Name: ";
    $Body .= $name;
    $Body .= "\n";

    $Body .= "Email: ";
    $Body .= $email;
    $Body .= "\n";

    $Body .= "Phone: ";
    $Body .= $phone;
    $Body .= "\n";

    // send email
    $success = mail($EmailTo, $Subject, $Body, "From:".$email);

    // redirect to success page
    if ($success){
        echo "success";
    } else {
        echo "invalid";
    } 
?>

由于某种原因它没有按照我想要的方式工作，而不是给我发电子邮件（我知道将我的电子邮件发送到$ Emailto）。我经常只使用PHP表单，但我想避免重新加载页面。我试着去理解我在哪里犯错误。

Answer 1

将提交功能更改为：

$(document).ready(function() {
    $("#contact-form").submit(function(event){
        "use strict";
        event.preventDefault(); // cancels the form submission

        var firstname = $("#form_firstname").val();
        var lastname = $("#form_lastname").val();
        var email = $("#form_email").val();
        var phone = $("#form_phone").val();

        $.ajax({
            type: "POST",
            url: "process.php",
            data: {
                name:  firstname + lastname, //or firstname + " " + lastname if you want the first and lastname to be separated by a space
                email: email,
                phone: phone
            }
        }).done(function(data){
            console.log(data);  // will contain success or invalid 
        });
    });
});

您尝试为email和phone获取的值未正确定义（它们缺少form_）。并且只有在使用POST类型时才能使用GET类型的查询字符串。

Answer 2

$('#contact-form').submit(function(e){
 e.preventDefault();
 $.ajax({
  type: "POST",
  url: "process.php",
  data:$(this).serialize(), //get form values
 }).done(function(data){
  console.log(data);  // will contain success or invalid 
 });
});

纽贝：ajax形式不起作用

2 个答案: