2016-05-16 4 views
0

私はこれを多く探しましたが、jQueryとJSONの回答はすべて見つかりました。しかし、現時点では、私はvanilla JS clientsideとPHP serversideを使用していますが、今のところそれを維持したいと思います(私は初心者です)。バニラJSのAjaxリクエストが退屈です200OK

私は、ユーザーが標準の稼働日を設定または変更するためのチェックボックスを備えたモーダルを持っています。変更はデータベースに保存されます。ユーザーがモーダルを開くと、チェックボックスをオン/オフにして現在の作業パターンを反映させます。

私のコードは機能します(データはデータベースから取得され、ボックスはチェックされるか正しくチェックされません)。しかし、私はAjaxコールからエラーメッセージを受け取っています。 200K。私は理由を理解していないし、(エラーを隠すのではなく)私が作っている見かけのミスを解決したいと思います。

モーダル:私のコードを参照してください

<div id="vastRooster" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <p id="vrMsg" ></p> 
      <h2 class="text-center"><img src="//placehold.it/110" class="img-circle"><br>Vast rooster</h2>     
     </div> 
     <div class="modal-body"> 
      <h6 class="text-center">Stel uw vaste werkdagen in of wijzig deze. Wijzigingen worden per direct verwerkt in het rooster.</h6><br> 
       <form onsubmit="vastleggenRooster()" role="form" id="form" name="vRooster" method="post"> 
        <div class="form-group"> 
         <input type="checkbox" id="0" name="MaMo">Maandagmorgen 
        </div> 
        <div class="form-group"> 
         <input type="checkbox" id="1" name="DiMo">Dinsdagmorgen 
        </div> 
        <div class="form-group"> 
         <input type="checkbox" id="2" name="DiMi">Dinsdagmiddag 
        </div> 
        <div class="form-group"> 
         <input type="checkbox" id="3" name="WoMo">Woensdagmorgen 
        </div> 
        <div class="form-group"> 
         <input type="checkbox" id="4" name="DoMo">Donderdagmorgen 
        </div> 
        <div class="form-group"> 
         <input type="checkbox" id="5" name="VrMo">Vrijdagmorgen 
        </div> 
        <div class="form-group"> 
         <button type="submit" class="btn btn-danger btn-lg btn-block">Wijzigingen opslaan</button> 
        </div> 
      </form> 
     </div>  
    </div> 
</div> 

のJavaScript(機能checkVR()はボディのonloadに呼び出された):

function checkVR() { 
var qString = 1; 
callAjax(qString, 'core/functions/checkVastRooster.php', verwerkCheckVR, 'vrMsg'); 
} 

function callAjax(queryString, url, callback, message){ 
var request = new XMLHttpRequest(); 
request.onreadystatechange = function() { 
    if(request.readyState === 4 && request.status === 200) { 
     callback(request.responseText, message); 
    } else { 
     document.getElementById(message).innerHTML = 'Er is een fout opgetreden: ' + request.status + ' ' + request.statusText; 
    } 
    } 
request.open("POST", url, true); 
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
request.send(queryString); 
} 

function verwerkCheckVR(result) { 
for (i = 0; i < 6; i++) { 
    if (result[i] == 1) { 
     document.getElementById(i).checked = true; 
    } else { 
     document.getElementById(i).checked = false; 
    } 

} 
} 

PHP:

<?php 
require '../init.php'; 

if(empty($_POST) === false) { 

if (!$selvr->bind_param("i", $session_gebruiker_id)) { 
    echo "Binding parameters failed: (" . $selvr->errno . ") " . $selvr->error; 
    } 


if (!$selvr->execute()) { 
    echo "Execute failed: (" . $selvr->errno . ") " . $selvr->error; 
    } 

if (!$selvr->bind_result($MaMo, $DiMo, $DiMi, $WoMo, $DoMo, $VrMo)); 

while ($selvr->fetch()) { 
    echo $MaMo, $DiMo, $DiMi, $WoMo, $DoMo, $VrMo; 
} 

} 

?> 

I希望オメオネは私のAjaxコールに何が間違っているかを理解するのに役立ちます。私が学んでいると言ったように、私のコードに関する他の発言も大歓迎です。

貴重なお時間をいただき、ありがとうございます。私はある日、それを前払いするのに十分なことを願っています。

答えて

0

ここで欠落しているのは、ヘッダーとhttp_response_codeです。これは助けていないようです

<?php 
header("Content-Type: application/json;charset=utf-8"); 

require '../init.php'; 

if (empty($_POST) !== false) { 
    http_response_code(200); 
} 

if (!$selvr->bind_param("i", $session_gebruiker_id)) { 
    http_response_code(400); 
    echo "Binding parameters failed: (" . $selvr->errno . ") " . $selvr->error; 
    } 


if (!$selvr->execute()) { 
    http_response_code(400); 
    echo "Execute failed: (" . $selvr->errno . ") " . $selvr->error; 
    } 

// This IF is not doing anything! 
// if (!$selvr->bind_result($MaMo, $DiMo, $DiMi, $WoMo, $DoMo, $VrMo)); 

while ($selvr->fetch()) { 
    http_response_code(400); 
    echo $MaMo, $DiMo, $DiMi, $WoMo, $DoMo, $VrMo; 
} 
?> 
+0

が、それは私がすでに取得したのと同じエラー/成功メッセージを出力します。有効なAjaxのレスポンスを受信するために

は、PHPのドキュメントには、これに類似したものでなければなりません。その他の提案はありますか? –

関連する問題