Question

我们有一个应该将数据发布到外部域的表单。我们知道跨域限制，因此我们想要使用JSONP。

除了应该阻止重新加载页面的默认表单提交的部分外，所有部分都正常工作。以下是表格。

html页面：

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://gateway.wildfx.com/test.js"></script>
</head>
<body>
<form method="POST" id="wild">
    <fieldset>
        <label for="email">Your email:</label>
        <input type="text" name="email" id="wild">
        <p class="wild_err">invalid</p>
        <p>
            <input type="hidden" id="wild_v" name="v" value="test2">
            <input type="hidden" id="wild_l" name="l" value="">
            <input type="hidden" id="wild_i" name="i" value="identifier">
            <input type="hidden" id="wild_s" name="s" value="10612">
            <input type="submit" id="wild_button" value="Check">
        </p>
    </fieldset>
</form>

</body>
</html>

以下是Javascript。但是，如果提交了wild表单，则会重新加载页面，而不是使用JSONp传输数据。此外，甚至不记录submission2日志。

如果尝试用.click替换带有正确ID的from按钮的.cubmit（），但它也无效。脚本有什么问题？

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailAddress);
};
console.log('submission1');
$("#wild").submit(function(e) {     
console.log('submission2');
e.preventDefault();

    if (isValidEmailAddress(e["e"])) {
        var e = {};
        e["e"] = $("#wild_email").val();
        e["v"] = $("#wild_v").val();
        e["i"] = $("#wild_i").val();
        e["s"] = $("#wild_s").val();
        e["l"] = $("#wild_l").val();

        (function() {
                var wildAPI = "https://gateway.wildfx.com/testjsonp.php?jsoncallback=?";
                $.getJSON( wildAPI, {
                tagmode: e,
                format: "json"
            })
            .done(function( data ) {
                $(".wild_message_container").text('Success. you are in');
                setTimeout(function() {
                    $("#wildnotifier-container").hide();
                    $("#wildnotifier-overlay").hide();
            }, 5000);
            });
        })();
    } else {
        $(".wild_error").show();
        $("#wild_email").addClass("wild_input_error");
    }
});

Answer 1

你加载jQuery
您加载脚本
您的脚本尝试向表单
您将表单添加到页面

步骤3失败，因为表单不存在。移动脚本使其位于表单之后。（或者将它放在一个函数中，并在DOM准备好的情况下调用它。）

preventDefault和JSONP

1 个答案: