Question

我刚刚接到AJAX电话并尝试学习它。我有一个表单，我试图通过一个AJAX调用，但得到一个不能发送的常量错误，我无法绕过它，为什么它不起作用。

表格：

<form class="form-horizontal" id="contact-form"  method="post">
      <div class="control-group">
            <div class="controls">
                <input type="text" name="name" id="name" placeholder="Naam" class="form-control input-lg">                                
             </div>
      </div>
      <div class="control-group">
             <div class="controls">
                <input type="text" name="email" id="email" placeholder="Email adres" class="form-control input-lg">
             </div>
      </div>
      <div class="control-group">
             <div class="controls">
                 <textarea name="message" id="message" rows="8" class="form-control input-lg" placeholder="Bericht"></textarea>
             </div>
       </div>
       <div class="form-actions">
              <button type="submit" id="submit" class="btn btn-default btn-lg btn-block">Verstuur Bericht</button>
       </div>
       <div id="succes">
       </div>
</form>

Ajax Call

$('form').bind('submit',function(){
    $.ajax({
        type    : 'POST',
        url     : 'inc/actions/sendmail.php',
        data    : $(this).serialize(),
        cache   : false,
        dataType: 'text',
        success : function (serverResponse) { alert('mail sent successfully.'); },
        error   : function (jqXHR, textStatus, errorThrown) {alert('error sending mail');}
    });
})

和sendmail.php

$name = mysqli_real_escape_string($con,$_POST["naam"]);
$from = mysqli_real_escape_string($con,$_POST["email"]);                                    
$message = mysqli_real_escape_string($con,$_POST["bericht"]);

$message = wordwrap($message, 70);  
$to = "example@myemail.nl";
$subject = "Een gebruiker heeft een vraag of opmerking";

$body = "Some messages and colloring, to much to paste cause it's inline-markup";

$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= "From: noreply@ajaxfailure.nl";

if ($name == ''){
    echo '<p>U heeft geen naam ingevuld</p>';    
}else if($from == ''){
    echo '<p>U heeft geen emailadres achter gelaten</p>';
}else if($body == ''){
    echo '<p>U heeft geen bericht ingevuld niet ingevuld';
}else {
    if (mail ($to, $subject, $body, $headers)) {
        echo '<p>Uw bericht is verzonden.</p>';
    } else {
        echo '<p>Er is iets mis gegaan bij het verzenden van de data, probeer het opnieuw.</p>';
    }
}

每次它从AJAX调用返回错误警报并且不执行任何操作。我的控制台也没有发现错误，仍然是空白。

我根据网络标签上的建议检查了控制台，它甚至没有进入页面本身。该部分没有404错误。似乎请求被取消了。

Screendump of console / network

Answer 1

您的输入名称属性与您的php不匹配：

$name = mysqli_real_escape_string($con,$_POST["name"]); //<-- not 'naam'
$from = mysqli_real_escape_string($con,$_POST["email"]);                                    
$message = mysqli_real_escape_string($con,$_POST["message"]); //<-- not 'bericht'

Answer 2

编辑本

$('#contact-form').bind('submit',function(){

ajax-function没有绑定到元素。

Answer 3

除了其他答案，我认为你不能在这一行中使用this：

data : $(this).serialize(),

尝试使用：

data : $('form').serialize(),

Answer 4

您的AJAX请求正在被取消，因为在AJAX启动后，您的表单会立即执行标准表单提交，浏览器会重新加载页面。您需要在提交事件中返回false或者阻止默认值：

$('form').bind('submit',function(){
    ...
    ...
    return false;
});

或捕获事件并防止默认：

$('form').bind('submit',function(e){
    e.preventDefault();
    ...
    ...
});

上述任何一种方法都会阻止表单提交并允许您的AJAX请求完成。

AJAX调用没有被执行

4 个答案: