即使URL POST成功，Ajax POST调用也无法正常工作，返回错误代码0

Question

我正在尝试调用sendgrid api从我网站上的“联系我们”页面向自己发送电子邮件。 我有以下jQuery：

 (function($){ $(document).ready(function() { $('#submit-form').click(function(e){ e.preventDefault(); var reg = /^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,4})$/; var name = $('#form_name').val(), email = $('#form_email').val(), phone = $('#form_phone').val(), date = $('#form_date').val(), message = $('#form_message').val(), data_html, success = $('#success'), if(name == "") $('#form_name').val('Please enter your name.'); if(phone == "") $('#form_phone').val('Please enter your phone number.'); if(date == "") $('#form_date').val('Please enter a date and time.'); if(email == ""){ $('#form_email').val('Your email is required.'); }else if(reg.test(email) == false){ $('#form_email').val('Invalid Email Address.'); } if(message == "") $('#form_message').val('Message is required.'); if(message != "" && name != "" && reg.test(email) != false) { text_body = "name=" + name + "&email="+ email + "&message=" + message + "&phone="+ phone + "&date="+ date; data_html = "api_user=xxxx&api_key=xxxxxxx&to=xxx@xxx.com&toname=xxx&subject=Test_Subject&text=Test&from=" + email alert(data_html); $.ajax({ type: 'POST', url: 'https://api.sendgrid.com/api/mail.send.json', data: data_html, //dataType: 'text', success: function(msg){ alert('1'); if (msg == 'sent'){ alert('2'); success.html('<div class="alert alert-success">Message <strong>successfully</strong> sent!</div>') ; $('#form_name').val(''); $('#form_phone').val(''); $('#form_email').val(''); $('#form_date').val(''); $('#form_message').val(''); }else{ alert('3'); success.html('<div class="alert alert-error">Message <strong>not</strong> sent! Please Try Again!</div>') ; } }, error: function(jqXHR, textStatus, errorThrown){ alert(jqXHR.status); alert(textStatus); alert(':' + thrownError); } }); } return false; }); }); })(jQuery); 

我知道jQuery正在工作，因为sendgrid正在使用提供的数据发送电子邮件。 问题是，即使sendgrid成功执行，由于某种原因，ajax调用响应也会进入错误部分而不是成功部分，我也不知道为什么。 以下是弹出式窗口中显示的每个语句的值：

alert(jqXHR.status) - 0
alert(textStatus) - error
alert(':' + thrownError) - No popup displayed

以下是我的html表单：

 <div class="twelve columns offset-by-two formWrap"> <h2>Request a booking</h2> <form action="#" method="post" class="contactForm"> <div class="formSecWrap"> <input type="text" class="formField" title="Name" id="form_name" name="form_name" value="" /> <input type="text" class="formField" title="Email" name="form_email" id="form_email" value="" /> <input type="text" class="formField" title="Phone" name="form_phone" id="form_phone" value="" /> <input type="text" class="formField" title="Date &amp; Time" name="form_date" id="form_date" value="" /> </div> <div class="formSecWrap formSecWrap2"> <textarea class="textarea formField" title="Message" name="form_message" id="form_message"></textarea> </div> <input class="button" id="submit-form" type="submit" name="submit" value="Send Message" /> <div id="success"></div> <div id="test-message"></div> </form> </div> 

Answer 1

更改此：

$('#submit-form').click(function(e){

对此：

$('#submit-form').submit(function(e){

然后移动：

e.preventDefault();

提交功能的底部。 那应该工作。