我是jQuery, AJAX和php的初学者。以下是我想要达到的目标:
-如果用户通过一个没有电子邮件表单的页面进入网站，显示一个模式弹出窗口，要求他们使用电子邮件地址选择加入。
-一旦用户点击提交，在模态中更改内容以显示感谢信息，然后自动关闭模态，允许用户与他们最初来到的页面进行交互。
-将提交的信息发送到数据库
-I不想在提交时将它们重定向到确认页面，但如果模态没有自动关闭，而只是显示确认消息，则可以。
我必须托管php在不同的服务器上比网站托管，所以我认为有一个跨域响应问题。我能够在Firefox, Chrome, Safari和IE10中成功提交表单(提交到数据库中)，并且在提交表单时，我没有在控制台中看到任何错误消息。但是，数据将无法从IE8传输。
我在网上做了一些研究，阅读了关于使用JSON, JSONP和XDR的内容，但是a)我不清楚如何实现(现在在我的头上)，b)似乎使用这些方法似乎增加了某人访问这些电子邮件地址提交的风险。
我该怎么做才能使它在IE8中工作?任何指导将不胜感激。到目前为止，iFrame是我能找到的最接近的替代方案，但是滚动条不会消失，它们是不可接受的。
这是我的脚本(web服务器自动使用jquery 1.3.2，我必须使用一个较新的版本的模式，因此使用noConflict。
<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());
?>
<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>
首先，我必须说使用jQuery_1_7_2()对于代码重写来说绝对看起来很糟糕!我建议您使用var $j = jQuery.noConflict(true);，然后您可以使用您常用的$j(window).method()'s
无论如何，通过AJAX调用跨站点发布可能会面临更多的麻烦。这个链接可能与:CORS与jQuery和XDomainRequest在IE8/9
使用IFRAME发布听起来像一个好主意-但我不明白为什么你不能隐藏滚动条。您可以使用CSS将iframe移动到浏览器视窗的-999em(垂直)位置，或者将其包装在隐藏的div中。