javascript - 通过 AJAX 使用 jquery 工具包 (jkit) 验证发布表单

Question

我不确定为什么我的 ajax 调用不起作用。我有一个启用了 jkit 验证的联系表单，我想在它通过所有验证规则后通过 AJAX 发送它。然后我想把结果放到html div而不是去php。请帮忙

HTML

<form method="post" action="servercode/contact.php" data-jkit="[form:validateonly=yes; success=Your success message]">
    <div class="contact-one">
        <p>
            <label for="miniusername">Username:</label><br />
            <input name="miniusername" id="miniusername" data-jkit="[validate:required=true;min=3;max=10;error=Please enter your username (3-10  characters)]">
        </p>
    </div>  
    <div class="contact-two">  
        <p>
            <label for="miniemail">E-mail:</label><br />
            <input name="miniemail" id="miniemail" data-jkit="[validate:required=true;strength=50;error=Please write your email]">
        </p>
    </div>  
    <div class="contact-three">  
        <p>
            <label>Message:</label><br />
            <textarea id="message" name="message"></textarea><br/><br/> 
            <input class="button-submit" id="send" name="send" type="submit" value="SUBMIT" />
        </p>
    </div>            
    <div id="content"></div>
</form>

AJAX 调用

$("#send").click(function(){
    $.ajax({
        type: 'POST',
        url: 'servercode/contact.php',
        success: function(data){
            if(data != null) $("#content").html(data)
        }
    });
});

PHP

<?php
if (isset($_POST['send'])){
    $to = 'abc@aol.com'; 
    $subject = 'Contact form website';

    $message = 'Name: ' . $_POST['miniusername'] . "\r\n\r\n"; 
    $message .= 'Email: ' . $_POST['miniemail'] . "\r\n\r\n";
    $message .= 'Message: ' . $_POST['message'];
    $success = mail($to, $subject, $message);
}?>
<?php if (isset($success) && $success) { ?>
    <h1>Thank You</h1>
    <p>Your message has been sent.</p>
<?php } else{ ?>
    <h1>Oops!</h1>
    <p>Sorry, there was a problem sending your message.</p>
<?php } ?>

Answer 1

您没有通过 ajax 调用发送任何数据...尝试这样做:给您的表单一个ID(例如，form_id)

$("#form_id").submit(function(event)
{
 event.preventDefault();
 var data = $(this).serialize();
 var url = $(this).attr("action");
 $.ajax({
    type: 'POST',
    data: data,
    url: url,
    success: function(data){
             if(data != null) $("#content").html(data)
     },
    error: function(xhr,status,msg){
       console.log(xhr.responseText);
    }
 });
});