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

Using AJax to prevent page redirect after submitting form

大家下午好。我有一个非常独特的情况,我似乎无法找到答案。我有一个发送到电子邮件的表单,但是一旦提交表单,它就会重定向到处理信息并发送电子邮件的 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 中。

试试这个:

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

你有点糊涂了。

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

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

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