提交表單后未顯示“謝謝”消息

Question

提交表單后，我試圖在同一頁面上顯示感謝消息。 但是，即使正確提交了表單，也不會顯示該消息。

我正在使用以下JavaScript來滿足此要求：

$(function () 
        {
            $('form').submit(function (e) 
            {
                e.preventDefault();
                $.ajax(
                {
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) 
                    {
                        if(result.indexOf("success") > -1)
                        {
                            document.getElementById("thankyou_message").style.display = "inline";
                        }
                    }
                });
            });
        });

網址的響應如下所示：

{"result":"success","data":...

我的代碼位於以下代碼筆URL中： http ://codepen.io/abbor123/pen/EgjLdR

您能否說明一下我的編碼中妨礙頁面文本顯示的問題？

PS：我是一個初學者，因此我要求您對我保持溫柔。 :)

謝謝。 AB

Answer 1

我認為，如果您的示例數據正確，則應該嘗試以下代碼：

if(result.result.indexOf("success") > -1){
 document.getElementById("thankyou_message").style.display = "inline";
}

您正在JSON對象中執行indexOf，則應在字符串上執行此操作

http://www.w3schools.com/jsref/jsref_indexof.asp

Answer 2

從您發布的響應中，我假設您收到了json響應。 那么您可以像這樣檢查它。

success: function(response) {
    if(response.result == 'success') {
      document.getElementById("thankyou_message").style.display = "inline"; 
    } else {
      document.getElementById("thankyou_message").style.display = "none";
    }
}

檢查此示例代碼，該示例代碼返回json響應。 https://gist.github.com/rashivkp/ef581ea4f4d4e7fba90086ea2c6bb5d2

Answer 3

嘗試替換：

document.getElementById("thankyou_message").style.display = "inline";

至：

$('#thankyou_messa').fadeIn();