Ajax POST调用无法正常工作，即使url 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();

提交功能的底部。这应该有用。