表格提交后没有显示感谢信息

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";
                        }
                    }
                });
            });
        });

url的响应是这样的:

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

我的代码在以下codepen URL: http://codepen.io/abbor123/pen/EgjLdR

你能解释一下我的代码阻碍了页面中文本的显示吗?

注:我是初学者，所以我请求你对我温柔一点。:)

谢谢。AB

Answer 1

从您发布的响应中，我假设您得到了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 2

如果你的样本数据是正确的，我认为你应该尝试这个代码:

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

你在JSON对象中做indexOf你应该在字符串

上做这个http://www.w3schools.com/jsref/jsref_indexof.asp

Answer 3

try replace:

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

:

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