4

ここに私の最初の投稿。Java/AJAX は初めてですが、PHP の経験はある程度あります。処理のためにhtmlフォームデータをphpファイルに渡そうとしています。目標は、php スクリプトでフォーム データを処理し、true/false フラグを返すようにすることです。画面をリフレッシュしたくないので、AJAXを試しています。php スクリプトからの応答に基づいて、ポップアップが既存の画面にユーザーへの情報を重ねます。

私のHTMLフォームコードは次のとおりです:-

<form name="screen3" method="post" action="" id="scr3" />
<input type="image" src="images/proceed.jpg" alt="Proceed" id="proceed1" name="submit" value="Send" />
</form>

javascriptを使用してフォームから送信ボタンをリダイレクトしました:-

<script type="text/javascript">
$(document).ready(function() {
$('#proceed1').click(function(e) {
    e.preventDefault();
    x=validateScreen3();
    if (x) {getFormData();}
        })
    });
</script>

これまでのところ、validateScreen3() が呼び出され、ユーザーのエントリが検証されます (スクリプトで退屈することはありません)。getFormData が呼び出されますが、そこに問題があります:-

function getFormData() {
var xmlhttp;
var emailAddress = document.getElementById("emailaddress").value;
var entryCode = document.getElementById("entrycode").value;
var acceptance = document.getElementById("acceptance").value;
var Sel = document.getElementById("sel").value;


xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","test1.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("emailaddress="+emailAddress);
}

変数データが​​正常に関数に渡されることを確認しましたが、上記の test1.php スクリプトが呼び出されて実行されているようです。ここに test1.php ファイルがあります:-

<?php
$here = $_POST['emailaddress'];
echo '</div></div>';
if (!empty($here)) {
echo '<div style="position:absolute; top:100px; left:300px; width:400px; height:200px; background-color:#CCC; color:#000; z-index:50;">';
echo 'got the variable '.$here;
echo '</div>';
}
else {
echo '<div style="position:absolute; top:100px; left:300px; width:400px; height:200px; background-color:#CCC; color:#000; z-index:50;">';
echo 'DIDNT GET the variable '.$here;
echo '</div>';
}

?>

これらの div はどちらも表示されず、私が考えることができるすべてのテストから、ファイルは単に呼び出されていません。アイデアや提案は大歓迎です。

4

2 に答える 2

1

XMLHttpRequestのイベントのイベント ハンドラを追加する必要がありますonreadystatechange。PHP が応答を送信すると、次のイベントが発生します。

xmlhttp.onreadystatechange = function(response)
{
    if (this.readyState===4 && this.status===200)
    {//readyState 4 means request is finished
        document.body.innerHTML += response;//since it's an HTML response...
    }
};

しかし、jQ を使用しているので、これらすべてのヘッダーについて心配する必要はありません。チェックする$.ajaxだけです。

ある時点で、古いブラウザー (IE < 9、または IE < 8) をサポートする必要があるため、jQ を捨てたいと思うかもしれません。その場合、これは役立つかもしれません

明確にするために：
バニラJS：

var xhr =new XMLHttpRequest();
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function()
{
    if (this.readyState === 4 && this.status === 200)
    {//response is xhr property in vanilla JS
         document.body.innerHTML += this.responseText;
    }
    if (this.readyState === 4 && this.status !== 200)
    {//error in request
        console.log(this);//<-- check your console
        document.body.innerHTML += '<h1>Http error: ' + this.status;
    }
};
xhr.open("POST","test1.php", true);
xht.send("emailaddress="+emailAddress);

それはうまくいくはずです。何らかの理由でそうでない場合は、次のように jQuery で試してください。

$.ajax({ url: 'test1.php',
         type: 'POST',
         data: {emailaddress: $('#emailaddress').val()},
         success: function(response)
         {
              document.body.innerHTML += response;
         }
});

これがうまくいかない場合は、おそらく URL が間違っているか、PHP スクリプトを実行しているサーバーが別のドメインにあるか、フォローアップの質問を投稿する必要があります。
ただし、これが役立つことを願っています

于 2013-06-07T09:10:14.360 に答える