preventDefault 和 JSONP答案

【问题标题】：preventDefault and JSONPpreventDefault 和 JSONP
【发布时间】：2014-12-12 18:41:53
【问题描述】：

我们有一个应该将数据发布到外部域的表单。我们知道跨域的限制，因此我们想使用 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。但是，如果提交了野表单，则页面会重新加载，而不是使用 JSONp 传输数据。此外，甚至没有记录 submit2 日志。

如果尝试将 .submit() 替换为 .click 以获取具有正确 ID 的 from 按钮，但它也不起作用。脚本有什么问题？

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

【问题讨论】：

没有明显错误，表单提交被阻止when I test it。问题很可能与您如何（以及何时）将 JavaScript 加载到页面中有关。您尚未向我们展示您正在使用哪些脚本标签或它们在页面中的位置，因此我们无法确定。
Javascript 通过外部资源加载，表单附加在正文中。
等一下，我会添加整个脚本。

标签： javascript php jquery ajax jsonp

【解决方案1】：

你加载 jQuery
你加载你的脚本
您的脚本尝试向表单添加事件处理程序
您将表单添加到您的页面

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

【讨论】：

这可能是它在 FF 中无法运行但在 Chrome 和 Safari 中运行的原因吗？