2017-04-25 5 views
-1

JavaScriptでPHPスクリプトからjson配列をインポートしようとしていますが、リクエストが失敗し、xhr.responseTextがhtmlテンプレートのhtmlテンプレートのHTMLコードを返すたびにそれに。私はxamppを使用しています。ajaxが失敗し、jsonではなくWebページを返します

PHPコード:

<?php 
// This script is meant to display the data from Insight sensors DB 

include('includes/motebymote.html'); 

if ($_SERVER['REQUEST_METHOD'] == 'POST'){//Use the post method as a request method to the server 

    require('mysqli_connect.php');//Give information on which database to use 


    if(!empty($_COOKIE["mote_ID"]) || !empty($_COOKIE["std"]) || !empty($_COOKIE["end"])){ 

     //Setting variables 
     $moteID=$_COOKIE["mote_ID"]; 
     $start=$_COOKIE["std"]; 
     $end=$_COOKIE["end"]; 

     if(preg_match("/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/", $start) || preg_match("/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/", $end)) { 

      if(isset($moteID) && isset($start) && isset($end)){ 

       //Building the query 
       $q="SELECT date_time, modality, value FROM sensor_data WHERE mote_id = $moteID and date_time BETWEEN '$start' and '$end'"; 

       $r = @mysqli_query ($dbc, $q);//Doing the request 

       $numRow = mysqli_num_rows($r); 


       if ($r && $numRow>0){ 
        //echo "<p>There are $numRow data points associated to mote$moteID</p><br>"; 

        //echo"<table align ='center' width ='70%' cellpadding='4'><tr><th>Date&Time</th><th> Sensor Type</th><th> Value</th></tr>"; 

        $moteArray = array(); 
        while($data = mysqli_fetch_array($r, MYSQLI_BOTH)){ 
         //echo "<tr align ='center'><td>" .$data['date_time']. "</td><td>" .$data['modality']. "</td><td>" .$data['value']. "</td></tr>"; 
         $moteArray[] = $data;      
        } 
        //echo"</table>"; 
        $JSONMoteArray = json_encode($moteArray); 
        echo $JSONMoteArray; 
       } 
       else if ($numRow==0){ 
        echo "<h1>Sorry there are no data available</h1> 
        <p>There are no data available for mote$moteID</p>"; 
       } 
       else{//Give an error message if the query fails 
        echo '<h1>System Error</h1> 
        <p class="error">We could not record your order due to a system error. We apologize for any inconvenience.</p>'; 
       } 
      } 
     } 
     else { 
      echo "<h1> Wrong date format</h1> 
      <p>Please input the starting date in a yyyy-mm-dd format</p>"; 
     } 
    } 
    else{ 
     echo "<h1> Wrong input</h1> 
     <p> Please make sure that the mote is properly selected and that the start and end dates are entered in yyyy-mm-dd format</p>"; 
    } 
    mysqli_close($dbc); //close the database 
} 

exit(); //exits the script 
?> 
<!DOCTYPE html> 
<html lang="eng"> 
    <head> 
    <meta charset="utf-8"> 
    <title> Motes Data</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/mote.js" async></script> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    </head> 
    <body><br> 
     <form action="motebymote.php" method="post"> 
      <p>Please input a mote number: <input type="text" name="moteNo" id="moteNo"></p> 
      <p> Please input a starting date (yyyy-mm-dd):<input type="text" name="stDate" id="stDate"></p> 
      <p> Please input an end date (yyyy-mm-dd):<input type="text" name="endDate" id="endDate"></p> 
      <p><input type="submit" name="submit" value="submit" id="submit"/></p> 
      <p><input type="submit" name="display" value="display" id="display"/></p> 
      <div id="columnchart_material" style="width: 800px; height: 500px;"></div> 
     </form> 
    </body> 
</html> 
var but = document.getElementById("submit"); //Looking for the submit button 

if(but){           //if the button is clicked activate the event listener 
    but.addEventListener("click", moteIDDate); 
} 

//This function goes to fetch the different values and store them with cookies //to allow motebymote.php to use them 
function moteIDDate(){ 

    var moteID = $('#moteNo').val(); 
    document.cookie="mote_ID = " + moteID + ";time()+3600"; 

    var start = $("#stDate").val(); 
    document.cookie = "std="+start+";time() 3600"; 

    var end = $("#endDate").val(); 
    document.cookie= "end="+ end+";time() 3600"; 
}; 

var jsonData = $.ajax({ 
    url: "http://localhost/Insight/mote2/motebymote.php", 
    type:"GET", 
    cache: false, 
    dataType: "json", 
    success: function(xhr){ 
     console.log(xhr.responseText); 
    }, 
    error: function(xhr){ 
    console.log(xhr.responseText); 
    } 
}); 
+0

多くの質問を送信して持っていますそれらの間で:** 1)** error_reporting(E_ALL)を追加します。 ini_set( 'display_errors'、1); 'あなたのPHPページの上に(エラーがあるとわかっているので)** 2)**なぜPHPレスポンスにテンプレートを使用するのですか? (クエリ - >結果 - > json - >レスポンス - > json use - > tpl it、no?)** 3)** AjaxはPHP POSTにGETしますか? ** 4)** *お願いします。 '@'を取り除きます。 – OldPadawan

+0

ページに投稿していない場合は、ページにHTMLを含めてください。 –

+0

私はphpのページからjsonの配列をエコーすることができます私はPHPコードは大丈夫だと思うが、私はあなたが何をクエリで意味するのですか? - >結果 - > json - >応答 - > json use - > tpl it、いいえ? oldPadawan –

答えて

2

PHPコードは、 "もし... == POST" JavaScriptのAJAX呼び出しはいえ、 "GET"

+0

POSTを導入しようとすると、htmlコードとjson配列が返されますが、文字列として返されますが、エラー関数のコンソールログにも出力されます –

関連する問題