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 CALL

$("#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);
    }
 });
});

Answer 2

首先，您没有在帖子中包含任何数据到服务器，您可能希望显式指定dataType参数以指示您希望返回HTML。有几种方法可以实现这一目标，但这里有一个：

$("#send").click(function(ev) {
  ev.preventDefault();
  $.ajax({
    type: 'POST',
    url: 'servercode/contact.php',
    dataType: 'html',
    data: $(this).closest('form').serialize(),
    success: function(data) {
      if (data) {
        $("#content").html(data);
      }
    }
  });
});

您可能还想查看以下所有ajax选项：http://api.jquery.com/jquery.ajax/

您可能还有另一个问题，即mail（）命令未正确设置。我遇到过这个问题，我不得不设置postfix并重新启动网络服务器。

Answer 3

由于无法干扰jkit验证方法（它没有提供文档化的API），我管理它的唯一方法就是更改表单元素上的action属性来调用javascript函数而不是实际发送表格。为了确保noscript用户也能够使用我已经这样做过的表单。

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

    return false;
};

$("form").prop("action", "javascript:sendContactForm()");

表单上的serialize（）也不会附加＆lt; input type =＆＃34; submit＆＃34; /＆gt;＆＃39; s值，因此您需要轻松修改您的PHP代码：

<?php
if (!empty($_POST))
{
    $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);
} 

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 } ?>

通过AJAX发布带有jquery kit（jkit）验证的表单

3 个答案: