jQuery表單提交未成功調用

Question

單擊提交之前beforeSend:可以，但不會success:也沒有控制台錯誤。 數據也正確提交到數據庫！ 那么為什么不叫success: 。 請幫忙

$(function() {
    //hang on event of form with id=ticketForm
    $("#ticketForm").submit(function(e) {
        //prevent Default functionality
        e.preventDefault();
        //get the action-url of the form
        var actionurl = e.currentTarget.action;
        var form = $('#ticketForm');
        var submit = $('#submite');

        $.ajax({
            url: actionurl,
            type: "POST",
            data: $("#ticketForm").serialize(),
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            cache: false,
            beforeSend: function(e) {
                submit.html("Booking....");
            },
            success: function(e) {
                submit.html("Booking Completed !");
                //get the message from booking.php and show it.
                $(".alert").removeClass("hide");
                var msg = $.ajax({
                    type: "GET",
                    url: actionurl,
                    async: false
                }).responseText;
                document.getElementById("success-message").innerHTML = msg;
                setTimeout(function() { // wait for 3 secs(2)
                    location.reload(); // then reload the page.(3)
                }, 3000);
            },
            error: function(e) {
                console.log(e)
            }
        });
    });
});

控制台消息

Object {readyState: 4, responseText: "<strong>Seat Booked Successfully</strong>", status: 200, statusText: "OK"}

Answer 1

在Ajax調用中，“ dataType”屬性表示可以從客戶端（瀏覽器）獲得什么數據格式。 根據錯誤消息，服務器返回“字符串”而不是“ json”。

但是另一方面，給定的ajax調用期望json數據由后端服務器返回。 提供一個有效的JSON作為響應或將數據類型更改為html。

Answer 2

在AJAX調用設置中，將dataType設置為json ，但是作為回報，您提供了一個字符串。

dataType（默認值：Intelligent Guess（xml，json，腳本或html））您期望從服務器返回的數據類型。 如果未指定任何內容，則jQuery將嘗試根據響應的MIME類型進行推斷

因此，您有兩種解決方案：

1. 提供有效的JSON作為響應
2. 不要通過更改dataType值（更改為html ）或將其刪除來請求JSON。

Answer 3

我有類似的問題。 成功重定向頁面時，您需要使用e.preventDefault（）;。 //防止頁面刷新

在ajax調用之后或

返回false； //防止頁面刷新

像這樣的東西：

$(function() {
//hang on event of form with id=ticketForm
$("#ticketForm").submit(function(e) {
//prevent Default functionality
e.preventDefault();
//get the action-url of the form
var actionurl = e.currentTarget.action;
var form = $('#ticketForm');
var submit = $('#submite');     


$.ajax({
        url: actionurl,
        type: "POST",
        data: $("#ticketForm").serialize(),
        dataType: "json",
        contentType: 'application/json; charset=utf-8',
        cache: false,
        beforeSend: function(e) {
          submit.html("Booking....");
        },
        success: function(e) {
            submit.html("Booking Completed !");
            //get the message from booking.php and show it.
            $( ".alert" ).removeClass( "hide" );
            var msg = $.ajax({type: "GET", url: actionurl, async: false}).responseText; 
            document.getElementById("success-message").innerHTML = msg;
            setTimeout(function(){// wait for 3 secs(2)
            location.reload(); // then reload the page.(3)
            }, 3000); 
        },

        error: function(e) {
            console.log(e)
        }
});
return false;     e.preventDefault();  //any one of this options to prevent page refresh after ajax call
});
});