2016-08-05 5 views
0

私はユーザーが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; 
    }); 
    }); 
+0

私は、あなたtr jQueryをajaxに使用するのではなく、単純なJavaScriptを使用します。 http://www.w3schools.com/php/php_ajax_php.asp – Nerazzurri

答えて

0

は、AJAX呼び出しを下回っているラインreturn false;を削除します

+0

ありがとうございました、今は完璧に動作しています –

+0

@A.Hollingsworth:これをあなたの答え –

関連する問題