【问题标题】:Thank You message not displayed after Form submission提交表单后未显示感谢信息
【发布时间】:2016-09-11 18:27:32
【问题描述】:

我试图在提交表单后在同一页面中显示感谢信息。但是,即使正确提交了表单,也不会显示消息。

我正在使用以下 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

您能否解释一下我的编码妨碍页面中文本显示的问题?

P.S.:我是初学者,因此请您对我温柔一点。 :)

谢谢。 乙

【问题讨论】:

  • 您的代码是否进入if 块内?
  • 有很多东西。在您的示例中,您的结果响应之一不是数组,因此 indexOf 将不起作用。二这是一个json响应吗?您是否检查以确保它正在被解析?
  • 根据您返回的 JSON,您要检查 result['result'] 是否成功,而不仅仅是包含整个 JSON 的 result
  • 为什么不只是$('#thankyou_message').css({'display', 'inline'});?您已经在使用 jQuery。

标签: javascript html forms form-submit


【解决方案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

【讨论】:

    【解决方案2】:

    如果您的示例数据正确,我认为您应该尝试此代码:

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

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

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

    【讨论】:

      【解决方案3】:

      尝试替换:

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

      到:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2019-05-03
        • 1970-01-01
        • 1970-01-01
        • 2017-12-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多