Ajax POST调用不能正常工作,返回错误代码0,即使url POST成功

Ajax POST call not working properly, returns error code 0 even though url POST was successful

本文关键字:POST 错误代码 返回 即使 成功 url 工作 不能 调用 常工作 Ajax      更新时间:2023-09-26

我试图调用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>

修改如下:

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

:

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

然后移动这个:

e.preventDefault();

放到submit函数的底部。应该可以了