使用 AJax 防止提交表单后页面重定向

Question

大家下午好。我有一个非常独特的情况，我似乎无法找到答案。我有一个发送到电子邮件的表单，但是一旦提交表单，它就会重定向到处理信息并发送电子邮件的 php 文件。我到处搜索，看到我想要完成的事情可以使用 AJax 来完成，但我似乎无法让它工作。我使用 JQuery 将 for 加载到 div 中，它包含在我的 index.html 中。问题是，当我提交它时，它会重定向到 php 文件，但我希望它保留在包含它的 index.html 中。我把我的代码放在下面。提前谢谢你。

<form name="inquiryForm" id="inquiryForm" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
    method="POST">              
        <fieldset>
            <legend>&#42; Required</legend>

            <br>

            First Name<input type="text" name="fname" value="<?php echo $fname;?>">
            <span class="error">* <?php echo $fnameErr;?></span><br><br>

            Last Name<input type="text" name="lname" value="<?php echo $lname;?>">
            <span class="error">* <?php echo $lnameErr;?></span><br><br>

            Phone Number<input type="text" name="phone" value="<?php echo $phone;?>"><br><br>

            Email Address<input type="text" name="email" value="<?php echo $email;?>">
            <span class="error"><?php echo $emailErr;?></span><br><br>

            <label>How did you find us?</label>
                <select name="how">
                    <option value=""> -- Please select -- </option>

                    <option>Google</option>

                    <option>Yahoo</option>

                    <option>Link from a website</option>

                    <option>Word of mouth</option>

                    <option>Other</option>
                </select><br><br>

            <label>Inquiry&#42;</label><br>

            <textarea name="inquiry" value="<?php echo $inquiry;?>" rows="5" cols="40"></textarea>
            <span class="error">* <?php echo $inquiryErr;?></span><br><br><br>

            <input type="submit" name="submit" id="submit" value="Submit">

            <input type="reset" name="reset" value="Reset">
        </fieldset>
    </form>

下面是我的php文件

<?php
/* Set e-mail recipient */
$myemail  = "my email address";
$subject = "Ism Clothing Contact Form Submission";

// define variables and set to empty values
$fnameErr = $lnameErr = $emailErr = $inquiryErr = "";
$fname = $lname = $email = $inquiry = "";
$phone = $_POST['phone'];
$how = $_POST['how'];

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["fname"])) {
        $fnameErr = "First Name is required";
    } else if (empty($_POST["lname"])) {
        $lnameErr = "Last Name is required";
        } else {
             $fname = test_input($_POST["fname"]);
             $lname = test_input($_POST["lname"]);

             if (!preg_match("/^[a-zA-Z ]*$/",$fname)) {
               $fnameErr = "Only letters and white space allowed"; 
             } else if (!preg_match("/^[a-zA-Z ]*$/",$lname)) {
               $lnameErr = "Only letters and white space allowed"; 
             }
        }

    if (empty($_POST["email"])) {
        $emailErr = "Email is required";
    } else {
     $email = test_input($_POST["email"]);

     if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
       $emailErr = "Invalid email format"; 
     }
    }

    if (empty($_POST["inquiry"])) {
     $inquiryErr = "Please enter questions comments, or concerns";
    } else {
     $comment = test_input($_POST["inquiry"]);
    }
}

function test_input($data)
{
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

/* Format form data for email */
$message = "Hello!

Ism Clothing contact form has been submitted by:

Name: $fname $lname
E-mail: $email
Phone #: $phone

How did he/she find it? $how

Comments:
$inquiry

End of message
";

/* Send the message using mail() function */
mail($myemail, $subject, $message);

?>

下面是 Jquery 代码，它将我的 contact.php（表单）加载到我的主页 (index.html)

$("#contact").on("click", function(){
    $("#content").load("contact.php");
});

我在我的 index.js 中使用上面的代码将 contact.php 加载到我的 index.html 中的 div 中。

Answer 1

试试这个：

 $("#inquiryForm").on("submit", function(e){
    e.preventDefault();
    $this = $(this);
    $.ajax({
       type: "POST",
       url: $this.attr('action'),
       data: $this.serialize(),
       success : function(){
          alert('Done');
       }
    });
});

Answer 2

你有点糊涂了。

使用 Ajax 您根本不需要表单：您向用户显示输入字段，然后在按下按钮时构建一个 Ajax 请求并等待回复。这意味着您的页面不会从原来的位置移动。

相反，当提交表单时，HTML 需要一个输出表单结果的地方：毕竟通过提交您将导航到 url。

现在，您有两个解决方案： 1) 学习如何使用Ajax。 2) 在页面上放置一个隐藏的 iFrame，给它一个 ID，将表单目标设置为该 ID，并向 iFrame 加载事件添加一个处理程序

使用 AJax 防止提交表单后页面重定向

Using AJax to prevent page redirect after submitting form

php

ajax

form-submit