Мой AJAX скрипт не дает какой-либо вывод

index.php: -Мой AJAX скрипт не дает какой-либо вывод

<!DOCTYPE html> 
<html> 
<head> 
<script src="food.js"></script> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
</head>  
<body onloadd="process()"> 
<div class="container"> 
<h2 class="page-header">The Chuff Bucket</h2> 

<strong>Enter the food you want to order:</strong><br><br> 

    <input type="text" class="form-control" id="userInput"> 

<div id="underInput"> 

</div> 
</div> 
</body> 
</html>

foodstore.php

<?php 
    header('Content-Type:text/xml'); 
    echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>'; 

    echo '<response>'; 

    $food = $_GET['food']; 
    $foodArray = array('tuna','bacon','loaf','sandwich','pizza'); 
    if(in_array($food, $foodArray)) 
    { 
     echo 'We do have'.$food.'!'; 
    } 
    elseif($food=='') 
    { 
     echo 'Enter a food chomu'; 
    } 
    else 
    { 
     echo 'We have no'.$food; 
    } 

    echo '</response>'; 
    ?>

food.js "-

var xmlHttp = createXmlHttpRequestObject(); 

    function createXmlHttpRequestObject() 
    { 
    var xmlHttp; 

    if(window.ActiveXObject) 
    { 
     try{ 

      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     catch(e) 
     { 
      xmlHttp = false; 
     } 
    } 
    else 
    { 
     try{ 

      xmlHttp = new XMLHttpRequest(); 

     } 
     catch(e) 
     { 
      xmlHttp = false; 
     } 
    } 
    if(!xmlHttp) 
    { 
     alert("Cannot create the object!!"); 
    } 
    else 
    { 
     return xmlHttp; 
    } 
    } 

    function process() { 

    if(xmlHttp.readyState == 0 || xmlHttp.readyState == 4) 
    { 
    var food = encodeURIComponent(document.getElementById("userInput").value); 
    xmlHttp.open("GET","foodstore.php?food="+food,true); 
    xmlHttp.onreadystatechange = handleServerResponse(); 
    xmlHttp.send(null); 
    } 
    else 
    { 
     setTimeout('process()',1000); 
    } 
    } 

    function handleServerResponse() { 
     if(xmlHttp.readyState == 4) 
     { 
     if (xmlHttp.Status == 200) 
     { 
      xmlResponse = xmlHttp.responseXML; 
      xmlDocElm = xmlResponse.documentElement; 
      msg = xmlDocElm.firstChild.data; 
      document.getElementById("underInput").innerHtml = '<span style="color:blue;">'+msg+'</span>'; 
      setTimeout('process()',1000); 

     } 
     else 
     { 
      alert("Something is wrong!!"); 
     } 
     } 
     }

Я только начал с помощью AJAX и это мой первый код. Я даже бесплатно разместил его. Вот URL: - Chuff Bucket Я понятия не имею, что не так с код. Я сделал то же самое, что показано в учебнике.

источник

2016-03-07 Ashirogi Muto

Я бы рекомендовал использовать [JQuery Ajax] (http://api.jquery.com/jquery.ajax/). jQuery - это инфраструктура javascript. Это позволяет многое, включая упрощенные запросы AJAX. – ThinkTank

Хорошо, я попробую, но что не так с этим типом AJAX? –

В принципе, ничего не случилось. Вот как AJAX использовался 10 лет назад. Теперь это упростилось с помощью библиотек, таких как jQuery и Mootools, поэтому упростите свою жизнь и используйте простой способ =) – ThinkTank

Это не делает то, что вы думаете:

xmlHttp.onreadystatechange = handleServerResponse();

Это вызова handleServerResponse функции немедленно (который ничего не делает, потому что xmlHttp.readyState не 4 в то время), и настройка результат этой функции для обратного вызова onreadystatechange. Поскольку эта функция ничего не возвращает, этот результат равен undefined.

Не вызывать функцию, просто установите его как переменную в качестве обратного вызова:

mlHttp.onreadystatechange = handleServerResponse;

источник

2016-03-07 15:19:53 David

Я получил предупреждение, которое я написал в файле javascript, в котором говорилось: «Что-то не так!» –

@AshirogiMuto: Предположительно, это означало бы, что 'xmlHttp.Status' не' 200', когда этот код выполняется. Вы можете проверить ответ с сервера, чтобы узнать, в чем проблема. – David

Спасибо, я посмотрю файл сервера –

-1

Существует рамочная Javascript предлагает упрощенный способ использовать запрос Ajax как jQuery Ajax. Использование такого вида фреймворка - хороший способ упростить ваш код и не повторять себя DRY.

JQuery версия:

<script> 
$(document).on('keyup', '#userInput', function(){ 
    var food = $(this).val(); // # <= means ID 
    $.get('foodstore.php', 'food='+food, function(response){ 
     $('#underInput').html(response); 
    }); 
}); 
</script>

источник

2016-03-07 15:22:45 ThinkTank

Я, безусловно, попробую jquery ajax –

Зачем нужно это делать? *** Хороший ответ *** всегда будет объяснять, что было сделано и почему это было сделано таким образом, не только для OP, но и для будущих посетителей SO. [jQuery AJAX Basics] (http://jayblanchard.net/basics_of_jquery_ajax.html) –

@JayBlanchard Я упоминаю, почему он должен попробовать это прямо в комментариях к этому вопросу.Но ты прав. Лучше дважды, чем один раз. – ThinkTank

Мой AJAX скрипт не дает какой-либо вывод

ответ

Смежные вопросы