javascript - 如何使用ajax通过表单中的按钮提交数据

Question

我正在尝试制作一个使用 HTML5 验证并使用 ajax 来显示邮件发送状态的表单。但是当我点击发送按钮时它不起作用。

表单 HTML:

<div class="contactForm">
    <form onSubmit="onSubmitForm()" id="form">
        <div style="font-size:36px;">Contact Me</div>
        <br>
        <br>
        <label>Name*</label>
        <input name="name" id="name" type="text" required>
        <label>Subject*</label>
        <input name="subject"  id="subject" type="text" required>
        <br>
        <br>
        <label>Email*</label>
        <input name="email"  id="email" type="email" required>
        <label>Contact</label>
        <input name="subject"  id="number" type="number">
        <br>
        <br>
        <label>Your Message*</label>
        <br>
        <textarea id="message" cols=86 rows=10></textarea>
        <br>
        <button type="submit" style="float:right;"></button>
    </form>
    <div class="sendingImage">Mail Sending</div>
</div>

它包含一个 div，当我单击网站上的按钮时将显示该 div，发送邮件后，div 将自动隐藏。但是当我单击按钮时，它无法按我想要的方式工作。

JS 表单:

function onSubmitForm() {
    var name = $("#name").val();
    var subject = $("#subject").val();
    var email = $("#email").val();
    var number = $("#number").val();
    var msg = $("#message").val();
    $("#form").hide();
    $(".sendingImage").show();
    $.ajax({
        type: "post",
        url: "mailme.php",
        data: { "name": name, "subject": subject, "email": email, "message": message }
    })
    .done(function(msg) {
        if (msg == "1")
        {
            alert("");
        }
    });
}

表单 PHP:

<?php
$name_id = $_POST['name'];
$email_id = $_POST['email'];
$subject_id = $_POST['subject'];
$message_id = $_POST['message'];

$message = "Name: $name_id\n
 Email Address: $email_id\n
 Subject: $subject_id\n
 Message: $message_id";

//mail('xyz@gmail.com','message from website',$message);
// made above line comment to test functionality
echo '1';
?>

如何解决？

Answer 1

您必须使用preventDefault()

<input type="submit" onclick="onSubmitForm(event);" value="Submit">

或者使用“button”代替按钮类型“submit”

<input type="button" onclick="onSubmitForm(event)" value="Submit">

另一件事是，由于您使用表单，因此使用 serialize() 是一种很好的做法，这有利于性能和简化代码

您的客户端代码；

function onSubmitForm(event){
 event.preventDefault();
var mydata = $("#form").serialize();
$("#form").hide();
$(".sendingImage").show();
 $.ajax({
            type: "post",
            url: "mailme.php",
            data: mydata,
            })
            .done(function(msg) 
            {
            if(msg=="1")
            {
                alert("");
            }
            });
}

并在您的服务器端 php 中像这样访问它

<?php
$data = $_POST['serialize'];
$name_id=$data['name'];
$email_id=$data['email'];
$subject_id=$data['subject'];
$message_id=$data['message'];

$message="Name: $name_id\n
 Email Address: $email_id\n
 Subject: $subject_id\n
 Message: $message_id";

//mail('xyz@gmail.com','message from website',$message);
 // made above line comment to test functionality
echo '1';
?>

希望这有帮助