AJAXロジックが動作しない

AJAXを初めて習得して学習します。私は、HTMLテキストボックス内の食品アイテムを探していて、そのアイテムが利用可能かどうかを知るためにサーバーと通信しようとしています。項目のそれぞれのステータスは、テキストボックスの下のdivタグに表示されますが、表示されません。AJAXロジックが動作しない

私はまだjQueryのを勉強していないと、以下の事を知っていただきたいと思います：

AJAXとJavaScriptを使用して平文でサーバーからの応答を取得し、以下のdivタグに表示する方法

テキストボックス（コード内の変更を通知する）。
POSTメソッドでAJAXリクエストを送信するには、JavaScriptコードでどのような変更を行う必要がありますか（私はPHPコードの変更について知っています）？

//index.html

<head> 
    <script type="text/javascript" src="food.js"> 
    </script> 
</head> 

<body> 
    <h3>The Cheff's Place</h3> 
    Enter the food you want to order 

    <input type="text" id="userInput" name="input" onkeypress="sendInfo()"></input> 

    <div id="underInput"></div> 

</body> 

</html>

//food.js

var request; 

function sendInfo() { 
    var v = document.getElementById("userInput").value; 
    var url = "index.php?food=" + v; 

    if (window.XMLHttpRequest) { 
    request = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
    request = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    if (request.readyState == 0 || request.readyState == 4) { 
    try { 
     request.onreadystatechange = getInfo; 
     request.open("GET", url, true); 
     request.send(null); 
    } catch (e) { 
     alert("Unable to connect to server"); 
    } 
    } 
} 

function getInfo() { 
    if (request.readyState == 4) { 
    if (request.status == 200) { 
     var val = request.responseText; 
     document.getElementById('underInput').innerHTML = val; 
    } 
    } 
}

//index.php

<?php 
    header('Content-Type: text/plain'); 
    $food = $_GET['food']; 
    $foodArray = array("paneer", "butter", "chicken", "tandoori", "dal"); 
    if (in_array($food, $foodArray)) 
    { 
    echo "We do have " .$food; 
    } 

    elseif($food == "") 
    { 
    echo "Kindly enter some food"; 
    } 

    else 
    { 
    echo "We do not sell " .$food; 
    } 
?>

出典

2017-10-18 Krishna

ここに例を示します。リクエストが 'xhr.responseText'に戻った後で応答を得ることができますhttps://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange –

私は試みましたが、それは助けにはなりません。最後に上記のコードを試してみて、コードの変更点を教えてください。 – Krishna

food.jsでは、この時点でリクエストが送信されないため、この状態は発生しません。 'if（request.readyState == 0 || request.readyState == 4）'のコードが実行されないようにします –

あなたのコードを実行しました。それは正常に動作しています。 onkeypressをonkeyupに置き換えてください。（あなたはjqueryのファイルやCDNが含まれていると仮定）のjQueryを使用して

<input type="text" id="userInput" name="input" onkeyup="sendInfo()"></input>

：

は、本体の最後にスクリプトタグで、次のスニペットを含めます。

$("#userInput").keyup(function(){ 
     $.get("index.php", { food: $("#userInput").val() }) 
      .done(function(data) { 
       $("#underInput").html(data) 
      }) 
    });

出典

2017-10-18 15:04:11

私はjquery sirと詩ではないので、javascriptに関する助けが役に立ちます。 – Krishna

onkeyupを置き換えた後で動作しますか？ –

私はonkeyupを使ってみましたが、まだ動作していません。私はjqueryコードを含めませんでした。上記のコードを最後に試してみて、動作していない場合はコード内の変更をお知らせください。 – Krishna

AJAXロジックが動作しない

答えて

関連する問題