フォーラムを検索して参照し、ajax とフォーム送信の多くの例を試しましたが、私が達成しようとしていることに近いものを得ることができません。私はこれで何日も輪になっていて、新鮮な目をした人が必要であることを認めなければなりません.
2 つのページがあります: page1.php page2.php
Google jquery/1.9.0/jquery.js を使用し、これをローカルで開発します。
page1.php は次のとおりです (わかりやすくするために head スクリプトと body/html タグは省略しています)
$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
type: "POST",
url: "page2.php",
data: 'html',
success: function(html){
if(html == 'success'){
$('#address').fadeOut('slow');
$('#done').fadeIn('slow');
}else if(html == 'fail'){
alert('fail');
}
}
});
return false;
});
});
<div id="address">
<form action="page2.php" method="post" name="theForm">
<input name="checkname" type="text" id="checkname">
<input name="Proceed" type="submit" id="submit" value="Next Page" />
</form>
</div>
<div id="done">
That Worked!
</div>
Page2.php には、チェック名についてデータベースをチェックし、結果に応じて「成功」または「失敗」を返す mysql クエリがあります。クエリは正常に実行され、エラーは表示されません。
フォームが送信されると、page2.php が読み込まれ、ブラウザに「成功」と表示されます。Firebug は、response と html の両方でも成功を示しています。firebug 内にエラーはありません。
私は基本的に、page1.php をそのままにして、page2.php から成功が渡されたときに #address div を非表示にし、#done div を表示したいと考えています。
誰かが助けてくれることを願っています。
更新 このテストページを試しました：
ajaxone.php
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
type: "POST",
url: "ajaxtwo.php",
data: 'html',
success: function(html){
if(html == 'success'){
$('#address').fadeOut('slow');
$('#payment').fadeIn('slow');
alert('ok');
}else if(html == 'fail'){
alert('fail');
}
}
});
return false;
});
});
</script>
<style type="text/css">
#payment{
visibility:hidden;
}
</style>
<div id="address">
<form action="ajaxtwo.php" method="post" name="theForm" id="theForm">
<p>
<input name="name" type="text" id="name">
</p>
<p>
<input type="submit" name="submit" value="submit">
</p>
</form></div>
<div id="payment">Name is correct</div>
ajaxtwo.php
print_r($_POST);
if($_POST['name'] == 'rob'){
echo 'success';
}else{
echo 'fail';
}
上記の firebug を使用すると、次のエラーが表示されます。
配列 ( ) 未定義のインデックス: name 失敗
ただし、ajax 呼び出しを削除すると、送信が機能し、データが渡されます。では、ajax 呼び出し内でフォーム変数を指定しないと、次のページに何も投稿されないと仮定するのは正しいでしょうか?
更新 2 申し訳ありませんが、ここで自分自身に答えています。ajax 呼び出し内で送信するフォーム データを指定する必要があるようです。私はちょうど追加しました：
$('#theForm').serialize();
ajax 呼び出し内で、フォームがエラーなしで送信されるようになりました。ただし、これは依然として ajaxtwo.php に送信され、ajaxone.php ページで成功または失敗が表示されません。したがって、私の次の段階は、成功するか、ajaxone.php に表示されないかです。