文章/答案/技术大牛

发布

社区首页 >问答首页 >preventDefault和JSONP

问preventDefault和JSONP
EN

Stack Overflow用户

提问于 2014-10-17 16:10:06

回答 1查看 25关注 0票数 0

我们有一个应该将数据发布到外部域的表单。我们知道跨域的限制，所以我们想使用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传输数据。此外，即使是submission2日志也不会被记录。

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

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

javascript

php

jquery

ajax

jsonp

回答 1

Stack Overflow用户

发布于 2014-10-17 16:19:48

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

<代码>G29

步骤3失败了，因为表单不存在。移动脚本，使其位于表单之后。(或者将它放在一个函数中，并使用DOM调用它)。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26420648

复制

相似问题

问preventDefault和JSONP
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问preventDefault和JSONPEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问preventDefault和JSONP
EN