Question

我是jQuery，AJAX和php的初学者。这是我想要实现的目标：
- 如果用户通过尚未包含电子邮件表单的页面进入网站，请显示模式弹出窗口，要求他们选择使用电子邮件地址。
- 用户点击提交后，更改模态中的内容以显示感谢信息，然后自动关闭模式，允许用户与他们最初访问的页面进行交互。
- 将提交的信息发送到数据库
- 我不想在提交时将它们重定向到确认页面，但是如果模态没有自动关闭而是只显示确认消息就可以了。

我必须在不同于托管网站的服务器上托管php，因此我认为存在跨域响应问题。我能够在Firefox，Chrome，Safari和IE10中成功提交表单（提交进入数据库），当我提交表单时，我在控制台中看不到任何错误消息。但是，数据不会从IE8传输。

我已经在线完成了一些研究并阅读了有关使用JSON，JSONP和XDR但是a）我不清楚如何实现（现在在我脑海中）和b）似乎使用这些方法似乎增加有人访问这些电子邮件地址的风险。

如何在IE8中完成这项工作？任何指导将不胜感激。到目前为止，iFrame是我能找到的最接近的替代品，但滚动条不会消失，它们是不可接受的。

这是我的脚本（Web服务器自动使用jquery 1.3.2，我必须使用更新版本的模态，因此使用noConflict。不是删除对1.3.2的引用的选项）：

        <script type="text/javascript">
        var jQuery_1_7_2 = jQuery.noConflict(true);
        function validateEmail(email) { 
        var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return reg.test(email);
        }
        jQuery_1_7_2(document).ready(function(){
        var emailFormExists = jQuery_1_7_2('#e2ma_signup_form');
        if (document.cookie.indexOf('visited=true') == -1 && !(emailFormExists.length)){
        var fifteenDays = 1000*60*60*24*15;
        var expires = new Date((new Date()).valueOf() + fifteenDays);
        document.cookie = "visited=true;expires=" + expires.toUTCString();
        jQuery_1_7_2.fancybox({width:"100%", inline:true, href:"#inline"});
        }
        else
        {
        jQuery_1_7_2('#e2ma_signup_form').length
        var fifteenDays = 1000*60*60*24*15;
        var expires = new Date((new Date()).valueOf() + fifteenDays);
        document.cookie = "visited=true;expires=" + expires.toUTCString();  
        }
        jQuery_1_7_2("#contact").submit(function() { return false; });


        jQuery_1_7_2("#send").on("click", function(){
        var emailval  = jQuery_1_7_2("#email").val();
        var mailvalid = validateEmail(emailval);

        if(mailvalid == false) {
        jQuery_1_7_2("#email").addClass("error");
        }
        else if(mailvalid == true){
        jQuery_1_7_2("#email").removeClass("error");
        }



        if(mailvalid == true) {
        // if both validate we attempt to send the e-mail
        // first we hide the submit btn so the user doesnt click twice
        jQuery_1_7_2("#contact").fadeOut("fast", function(){
            jQuery_1_7_2(this).before("<p><strong>Thanks for opting in!</strong></p>");
            setTimeout("jQuery_1_7_2.fancybox.close()", 1000);
        });

        jQuery_1_7_2.ajax({
        type: 'POST',
        url: 'http://domain.com/scripts/email-opt-in.php',
        data: jQuery_1_7_2("#contact").serialize(),
        success: function(data) {
        if(data == "true") {
        jQuery_1_7_2("#contact").fadeOut("fast", function(){
            jQuery_1_7_2(this).before("<p><strong>Thanks for opting in!</strong></p>");
            setTimeout("jQuery_1_7_2.fancybox.close()", 1000);
        });
        }
        }
        });
        }
        }); 
        });
        </script>

这是php：

        <?php require_once('../Connections/Liz.php'); ?>
        <?php
        $insertSQL = "INSERT INTO optin (id, email) VALUES ('','".$_POST['email']."')";
        mysql_select_db($database_Liz, $Liz);
        $Result1 = mysql_query($insertSQL, $Liz) or die(mysql_error());
        ?>

这是我的HTML：

        <div id="inline">
            <h2>Join the mailing list!</h2>

            <form id="contact" name="contact" action="#" method="post">
                <label for="email">Your E-mail</label>
                <input type="email" id="email" name="email" class="txt">

                <button id="send">Submit</button>
            </form>
        </div>

Answer 1

首先，我不得不说使用jQuery_1_7_2()肯定对代码重写很糟糕！我可以建议var $j = jQuery.noConflict(true); - 然后您可以使用通常的$j(window).method()'s

无论如何，通过AJAX调用进行跨站点发布，您可能会遇到比其价值更多的麻烦。此链接可能相关：CORS with jQuery and XDomainRequest in IE8/9

使用IFRAME发布声音就像一个好主意 - 但我不明白为什么你不能隐藏滚动条。您可以使用CSS将iframe移动到浏览器视口的-999em（垂直）或将其包装在隐藏的div中。

表格不会通过ie8中的ajax提交 - 跨域响应失败

1 个答案: