私はユーザーが6つの数字を入力するフォームを持っており、それらの数字はxmlドキュメントに含まれる数字と比較されます。 PHPでSimpleXMLを使用して、入力した数値とxmlドキュメントに格納されている数値を比較し、xmlから対応する日付をエコーします。これは正しく動作します。ユーザ入力に基づいてPHPとAJAXを使用してXMLからデータを抽出するには?
結果が表示される前に、AJAXを使用して読み込み画面を表示しようとしています。フォームが送信されると、読み込み画面が表示されますが、結果は表示されません。
結果を表示するにはどうすればよいですか?
これは形式です:
<form id="numbers_form" method="post" action="index.php" ajax="true">
<div class="col-lg-2 col-md-2 numbers">
<input class="num_input" type="number" name="num1" id="num1" required >
</div>
<div class="col-lg-2 col-md-2 numbers">
<input class="num_input" type="number" name="num2" id="num2" required >
</div>
<div class="col-lg-2 col-md-2 numbers">
<input class="num_input" type="number" name="num3" id="num3" required >
</div>
<div class="col-lg-2 col-md-2 numbers">
<input class="num_input" type="number" name="num4" id="num4" required >
</div>
<div class="col-lg-2 col-md-2 numbers">
<input class="num_input" type="number" name="num5" id="num5" required >
</div>
<div class="col-lg-2 col-md-2 numbers">
<input class="num_input" type="number" name="num6" id="num6" required >
</div>
<div class="input-button">
<input class="submit" type="submit" value="Show me the money" name="submit">
</div>
<div class="img">
<img id="loader" src="images/loader.gif" alt="loading image">
</div>
</form>
これは私のPHPです:
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
$num3 = $_POST['num3'];
$num4 = $_POST['num4'];
$num5 = $_POST['num5'];
$num6 = $_POST['num6'];
$xml = simplexml_load_file('lottery.xml') or die("Error: Cannot create object");
if(isset($_POST['num1'])&& isset($_POST['num2'])&& isset($_POST['num3']))
{
foreach($xml->children() as $record)
{ // for every record node
if($record->num1 == $num1 && $record->num2 == $num2 && $record->num3 == $num3 && $record->num4 == $num4 && $record->num5 == $num5 && $record->num6 == $num6)
{
echo
"<div class='success'>
<h1>".$record->date."</h1>
</div>";
}
}
}
これはAJAXです:
$(function() {
$(".submit").click(function() {
var num1 = $("#num1").val();
var num2 = $("#num2").val();
var num3 = $("#num3").val();
var num4 = $("#num4").val();
var num5 = $("#num5").val();
var num6 = $("#num6").val();
var dataString = 'num1='+ num1 + '&num2=' + num2 + '&num3=' + num3 + '&num4=' + num4 + '&num5=' + num5 + '&num6=' + num6;
if(num1=='' || num2=='')
{
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
data:jQuery('#numbers_form').serializeArray(),
beforeSend: function(){
$('#loader').css('display','block');
},
success: function(res){
$('#loader').css('display','none');
}
});
}
return false;
});
});
私は、あなたtr jQueryをajaxに使用するのではなく、単純なJavaScriptを使用します。 http://www.w3schools.com/php/php_ajax_php.asp – Nerazzurri