jquery - 在 JQuery 中动态创建表单并使用 JSON 发布它

Question

我正在尝试在我的 XSLT 代码中动态创建 Campaignmonitor 时事通讯订阅。

<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>

Answer 1

关于jQuery API documentation ，重新回调函数:

success(data, textStatus, jqXHR) A callback function that is executed if the request succeeds.

也许添加失败监听器会有所帮助:

$.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 :

Important: As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently.

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