La logique AJAX ne fonctionne pas

Je suis novice en AJAX et je l'apprends. Je suis à la recherche d'un aliment dans ma zone de texte HTML et j'essaie de communiquer avec le serveur pour savoir si l'élément est disponible. L'état respectif de l'élément doit apparaître dans l'étiquette div sous la zone de texte, mais il ne s'affiche pas.La logique AJAX ne fonctionne pas

Je n'ai pas encore étudié jQuery et je voudrais savoir les choses suivantes:

Comment obtenir la réponse du serveur en texte clair en utilisant AJAX et JavaScript, et l'afficher dans la balise div ci-dessous la zone de texte (conseillez les changements à faire dans le code).
Quel changement dois-je faire dans le code JavaScript pour envoyer la requête AJAX dans la méthode POST (je connais les changements dans le code 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; 
    } 
?>

Source

2017-10-18 Krishna

Essayez de suivre l'exemple ici. Vous pouvez obtenir la réponse après que la requête revienne dans 'xhr.responseText' https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange –

J'ai essayé mais ça n'aide pas. Il serait utile que vous essayiez le code ci-dessus à votre fin et laissez-moi savoir les changements à faire dans le code. – Krishna

Dans food.js, cette condition ne se produira jamais puisque la demande n'est pas envoyée à ce moment-là. 'if (request.readyState == 0 || request.readyState == 4)' donc aucun code n'est exécuté –

J'ai couru votre code. Ça fonctionne bien. Remplacez simplement onkeypress par onkeyup.

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

En utilisant JQuery (En supposant que vous avez inclus le fichier jquery ou cdn):

Inclure l'extrait suivant dans la balise de script à la fin du corps.

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

Source

2017-10-18 15:04:11

Je ne suis pas vers avec jquery monsieur, donc toute aide en ce qui concerne javascript serait utile. – Krishna

Fonctionne-t-il maintenant après le remplacement d'onkeyup? –

J'ai essayé d'utiliser onkeyup mais cela ne fonctionne toujours pas. Je n'ai pas inclus le code jquery. Il serait utile que vous essayiez le code ci-dessus à votre fin et laissez-moi savoir les changements à faire dans le code si cela ne fonctionne pas. – Krishna

La logique AJAX ne fonctionne pas

Répondre

Questions connexes