私はjQuery、AJAX、phpの初心者です。私が達成しようとしていることは次
のとおりです: - ユーザーがまだ電子メール フォームを持っていないページから Web サイトに入ると、電子メール アドレスでオプトインするように求めるモーダル ポップアップを表示します。
- ユーザーが [送信] をクリックしたら、モーダルのコンテンツを変更してお礼のメッセージを表示し、モーダルを自動的に閉じて、ユーザーが最初にアクセスしたページを操作できるようにします。
- 送信された情報をデータベースに送信する - 送信
時に確認ページにリダイレクトしたくありませんが、モーダルが自動的に閉じず、代わりに確認メッセージが表示されれば問題ありません。
Web サイトがホストされているサーバーとは別のサーバーで 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>