在 JQuery 中动态创建表单并使用 JSON 发布答案

【问题标题】：Dynamically creating form in JQuery and posting it with JSON在 JQuery 中动态创建表单并使用 JSON 发布
【发布时间】：2012-12-18 05:53:45
【问题描述】：

我正在尝试在我的 XSLT 代码中动态创建一个活动监控时事通讯订阅。

<script type="text/javascript"><xsl:text disable-output-escaping="yes"><![CDATA[

    $(function() {
        $('#submit').click(function() {
             if ($('#nlapproved').attr('checked')) {
                newsletter();
            }
        });

        function newsletter()
        {
            $form = $('<form action="http://mydomain.createsend.com/t/j/s/jtes/" method="post" id="subForm" />');
            $form.append('<input type="hidden" name="cm-name" id="hidName" />');
            $form.append('<input type="hidden" name="cm-jtes-jtes" id="hidEmail" />');
            $form.append('<input type="hidden" name="cm-fo-pikty" id="hidPrivateBusiness" />');

            $form
                .find("#hidName")
                .val(']]></xsl:text><xsl:value-of select="$context//checkoutinformation/info[key='name']/value" disable-output-escaping="yes"/><xsl:text disable-output-escaping="yes"><![CDATA[');

            $form
                .find("#hidEmail")
                .val(']]></xsl:text><xsl:value-of select="$context//checkoutinformation/info[key='email']/value" disable-output-escaping="yes"/><xsl:text disable-output-escaping="yes"><![CDATA[');

            $form
                .find("#hidPrivateBusiness")
                .val(']]></xsl:text><xsl:value-of select="$acctype"/><xsl:text disable-output-escaping="yes"><![CDATA[');

            $.getJSON(
                $($form).get(0).action + "?callback=?",
                $($form).serialize(),
                function (data) {
                    if (data.Status === 400) {
                        alert("Error: " + data.Message);
                    } else { 
                        // 200
                        alert("Success: " + data.Message);
                    }
                }
            );
        }
    });
]]></xsl:text></script>

在我调用 getJSON 方法之前一切正常。之后没有任何效果。我在 Mozilla 错误控制台中找不到任何 JavaScript 错误。我检查了表单是否创建正确alert($('<div>').append(($form).clone()).html()); 显示正确的结果。

<form action="http://mydomain.createsend.com/t/j/s/jtes/" method="post" id="subForm"><input value="552" name="cm-name" id="hidName" type="hidden"><input value="aks@mydomain.com" name="cm-jtes-jtes" id="hidEmail" type="hidden"><input value="268278" name="cm-fo-pikty" id="hidPrivateBusiness" type="hidden"></form>

【问题讨论】：

所以，我们的想法是在没有任何用户干预的情况下创建并提交它，是这样吗？如果是，为什么不使用他们的fantastic API？我每天都用它...

标签： jquery json xslt

【解决方案1】：

在jQuery API documentation上，重新回调函数：

success(data, textStatus, jqXHR) 请求成功时执行的回调函数。

也许添加一个失败监听器会有所帮助：

$.getJSON(
    $($form).get(0).action + "?callback=?",
    $($form).serialize(),
    function (data) {
        if (data.Status === 400) {
            alert("Error: " + data.Message);
        } else { 
            // 200
            alert("Success: " + data.Message);
        }
    }
).error(function(data) {
    alert('have error http: ' + data);
}).complete(function(data){
    alert('have complete: ' + data);
});

更新：

也可能与 JSON 错误有关。来自API doc：

重要提示：从 jQuery 1.4 开始，如果 JSON 文件包含语法错误，请求通常会静默失败。

切换到$.get(...) 电话可能会测试这个理论。

【讨论】：

@AthulkSurendran 嗯，可能与 JSON 错误有关。来自API doc：“重要提示：从 jQuery 1.4 开始，如果 JSON 文件包含语法错误，请求通常会静默失败。”