我有一个表单,用户输入6个数字,并将这些数字与xml文档中包含的数字进行比较。我在PHP中使用SimpleXML将输入的数字与存储在xml文档中的数字进行比较,然后从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;
});
});
答案 0 :(得分:0)
删除ajax调用
下面的行return false;