jquery ajax请求无法启动 - 没有错误

时间:2013-06-25 10:06:00

标签: jquery ajax forms

我正在尝试修复一个应该发送简单电子邮件的简单表单

我没有收到任何javascript错误,但是没有触发ajax请求。我在这里和谷歌都收到了很多答案,但没有一个能帮到我的案子。

这里是表单html代码

<form method="post" id="signupform">    
<input type="text" name="name" id="name" placeholder="Nimi"><br>
<input type="email" name="email" id="email" placeholder="sähköposti@osoite.com"><br>
<p><a href="#" id="send"><b>Ilmoittaudu</b></a></p>
</form>
<div id="response"></div>

这是jquery验证和发送代码:

<script>
/* <![CDATA[ */
$(document).ready(function(){
    $("#countdown").countdown({
        date: "13 october 2013 12:00:00", <!--set website launch date and time here-->
        format: "on"
        },
        function() {
            // callback function
        });
    var left = $('.newsletter').offset().left;
    $("#subscribe").click(function(event){
        $(".newsletter").show().animate({ left : left }, { duration: 1000 });
        event.preventDefault();
        return false;               
    });
    $(".close1").click(function(event){
        $(".newsletter").animate({ left : "110%" }, { duration: 1000 });
        event.preventDefault();
        return false;               
    });
    $("#send").click(function(event){
        event.preventDefault();
        var cname = $("#signupform").find("#name").val();
        var cemail = $("#signupform").find("#email").val();
        var errcount=0;
        if(cname.length < 1) {      
            $(this).parent().find("#name").addClass("error");
            errcount = 1;
        } else
           $(this).parent().find("#name").removeClass("error");
        var emailRegex = new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);
        var valid = emailRegex.test(cemail);
        if (!valid) {
            $(this).parent().find("#email").addClass("error");
            errcount = 1;
        } else
            $(this).parent().find("#email").removeClass("error");
        if (errcount === 0 ) {
            alert('noerror');
            //form submitted succesfully
            $.ajax ({
                type: "POST",
                url: 'send.php',
                data: {
                    name: cname,
                    email: cemail
                },
                processData: false,
                async: false,
                success: function(response) {
                    alert('success');
                    if (response == 'Kaavake ei ole täytetty oikein') {
                        $('#response').html(response);  
                    } else {
                        $('#response').html(response);
                        $('#response').fadeIn('slow');                  
                    }
                },
                error: function(xhr, text, error) {
                    alert(text);
                    alert(error);
                }                   
            });            
        } else {          
            return false;
        }
    }); 
    $("a[data-rel^='prettyPhoto']").prettyPhoto({deeplinking:false});
    $(window).resize(function(){
        var height=$('.activeslide').height();
        var sidebarheight=$('.sidebar').height();
        $('.sidebar').css('min-height',height);
    }); 
    $(window).resize();
});
/* ]]> */
</script>

显示没有错误的警报,但没有显示警报成功,我无法在chrome dev-tools网络中看到ajax活动。

这里是send.php的代码

<?php

$subject = "Uusi ilmoittautuminen";
$error = 0;
$sendto = 'email@yahoo.com';
print_r($_POST);
if (!empty($_POST)) {
    //validate and strip user data
    if (!empty($_POST['name'])) {
        $name =  htmlspecialchars(strip_tags($_POST['name']));
    } else { 
        $error = 1; 
    }
    if (!empty($_POST['email'])) {
        $email =  htmlspecialchars(strip_tags($_POST['email']));
    } else { 
        $error = 1; 
    }   
    if ($error == 0) {
        //SENDING SECTION
        //prepare body
        $namesender = 'Yhteydenotto';
        $header  = "MIME-Version: 1.0" . "\r\n".
            "Content-type: text/plain; charset=utf-8" . "\r\n".
            "From:Yhteydenotto < noreply@mail.com >\r\n" .
            "Reply-To:".$name." <".$email.">\r\n".
            "X-Mailer: PHP/" . phpversion();
        $body = "Uusi ilmoittautuminen\n\nNimi: ".$name."\n\nSähköposti: ".$email."";
        //prepare subject
        $newsubject='=?UTF-8?B?'.base64_encode($subject).'?=';

        //send email
        $mailresult = mail($sendto, $newsubject, $body, $header);

        die("<p>Kiitos ilmoittautumisestasi!</p>");

    } else {
        echo 'Kaavake ei ole täytetty oikein';
        die;
    }

} else { echo 'no direct access allowed'; }

3 个答案:

答案 0 :(得分:2)

成功方法后return false;做了什么?更好地删除。此外,在url: 'send.php';之后你应该是一个正常的逗号后面有分号 除了一切看起来都正确。

要找到这种错误,只需检查控制台(我认为)每个浏览器都可以使用。会记录警告和错误。

http://jsfiddle.net/EvXgZ/2/你有工作版本,只是添加了我必须改变目标网址才能在jsfiddle上工作。

你的ajax调用应该看起来像

$.ajax ({
  type: "POST",
  url: 'send.php',
  data: {
    'name': cname,
    'email': cemail
  },
  async: false,
  success: function(response) {
    alert('success');
    if (response == 'Kaavake ei ole täytetty oikein') {
      $('#response').html(response);  
    } else {
      $('#response').html(response);
      $('#response').fadeIn('slow');                  
    }
  },
  error: function(xhr, text, error) {
    alert(text);
    alert(error);
  }
});

事实上,这个版本有效,所有混淆都是由粘贴代码前面的//引起的,这些代码另外粘贴在一行中,因此从未被执行过。另一个需要注意的重要事项是,如果您开发并更改了js文件,则必须确保从缓存中清除它们,以便在访问并测试时真正在网站上加载最新版本

答案 1 :(得分:0)

添加

     $("#send").click(function(e){
   e.preventDefault()
   //ajax code    
     })

答案 2 :(得分:0)

语法错误

$("#send").click(function() {
    var cname = $("#signupform").find("#name").val();
    var cemail = $("#signupform").find("#email").val();
    var errcount = 0;
    if (cname.length < 1) {
        $(this).parent().find("#name").addClass("error");
        errcount = 1;
    } else
        $(this).parent().find("#name").removeClass("error");
    var emailRegex = new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);
    var valid = emailRegex.test(cemail);
    if (!valid) {
        $(this).parent().find("#email").addClass("error");
        errcount = 1;
    } else
        $(this).parent().find("#email").removeClass("error");

    if (errcount === 0) {
        alert('noerror');
        // form submitted succesfully
        $.ajax({
            type : "POST",
            url : 'send.php',
            data : {
                name : cname,
                email : cemail
            }, //Missing , here
            processData : false,
            async : false,
            success : function(response) {
                alert('success');
                if (response == 'Kaavake ei ole täytetty oikein') {
                    $('#response').html(response);
                } else {
                    $('#response').html(response);
                    $('#response').fadeIn('slow');
                }
            },
            error : function(xhr, text, error) {
                alert(text);
                alert(error);
            }
        });
    } else {
        return false;
    }
});