Использование AJAX для отправки и получения информации с сервера

Я работаю над страницей, которая должна взаимодействовать с сервером через AJAX, но мой опыт работы с AJAX крайне ограничен. Вот как должна работать страница.Использование AJAX для отправки и получения информации с сервера

Когда нажата кнопка, если нажата кнопка «тест», просто выведите всплывающее сообщение о том, что вход был действительным. Когда нажата кнопка, если нажата кнопка «жить», программа должна отправить запрос на сервер с использованием URL «http://cs.sfasu.edu/rball/351/exam2.php», при этом содержимое поля ввода будет значением параметра «имя» , Затем страница отправит обратно объект JSON, который мне нужно проанализировать в регулярной переменной.

Я оставлю остальную часть материала JSON, так как это не то, что я спросил.

Пока у меня есть дизайн страницы, но, как я уже сказал, я не знаю, что я делаю с вещами AJAX. У меня есть код, написанный для него, но не уверен, что он прав.

Вот мой код:

<html> 
    <head> 
     <title>anner, Taylor</title> 

     <style type = "text/css"> 
      canvas { 
       border: 2px solid black; 
      } 
     </style> 

     <script type = "text/javascript"> 
      window.onload = function() { 
       var TTcanvas = document.getElementById("myCanvas"); 
       var TTcontext = TTcanvas.getContext("2d"); 

       TTcontext.strokeStyle = "red"; 
       TTcontext.fillStyle = "red"; 
       TTcontext.fillRect(250,50,100,100); 
       TTcontext.stroke(); 

       TTcontext.beginPath(); 
       TTcontext.moveTo(600, 0); 
       TTcontext.lineTo(0, 200); 
       TTcontext.lineWidth = 5; 
       TTcontext.strokeStyle = "black"; 
       TTcontext.stroke(); 

      } 

      function validate() { 
       var TTinput = document.getElementById("3letters").value; 

       if(TTinput.length < 3 || TTinput.length > 3) { 
        alert("Please enter 3 letters"); 
       } 

       var TTtest = document.getElementById("test"); 
       var TTlive = document.getElementById("live"); 

       if(TTtest.checked == true) { 
        alert("Input is valid"); 
       } 
       else if(TTlive.checked == true) { 
        return ajaxStuff(); 
       } 
      } 

      function ajaxStuff() { 
       var TTrequest = new XMLHttpRequest(); 
       TTrequest.open("GET", "http://cs.sfasu.edu/rball/351/exam2.php?name=TTinput.value", true); 
       TTrequest.send(); 
       var TTresponse = TTrequest.responseText; 
       TTrequest.onreadystatechange=function() { 
          if(TTrequest.readyState==4 && TTrequest.status==200) { 
              document.getElementById("myDiv").innerHTML.TTresponse; 
          } 
         } 
      }  
     </script> 
    </head> 

    <body> 
     <h1>Tanner, Taylor</h1> 

     <canvas id = "myCanvas" width = "600" height = "200"></canvas> <br> 

     <form> 
      Enter 3 letters: <input type="text" id="3letters"> <br> 
      <input type = "radio" id = "test" value = "test">Test 
      <input type = "radio" id = "live" value = "live">Live <br> 
      <input type = "button" id = "check" value = "Send" onclick="validate()"> 
     </form> 

     <div id="myDiv"> 

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

А вот ссылка на мою страницу на нашем сервере:

cs.sfasu.edu/cs351121/exam2.html

Кроме того, я знаю, что это говорит экзамен, но это на самом деле просто обзор мы были предоставлены для фактического экзамена, который на следующей неделе. Я просто пытаюсь понять, как это работает, но не знаю, что я делаю неправильно.

источник

2014-10-31 Beth Tanner

ваши называя .Open два раза, что приводит к нему бесконечному циклу. – TheProvost

Только что заметил, что теперь редактируем сообщение с исправленным кодом. Не получить ошибку больше, но не получить ничего вообще. –

Я не уверен, в чем проблема. Правильный код

Хорошо, теперь у меня проблема. Вы вызываете переменную запроса вне области видимости. Вы объявляете переменную запроса внутри своей функции ajaxStuff, поэтому она доступна только в этой области. Вот почему он не определен. Попробуйте это:

function ajaxStuff() { 
         var TTrequest = new XMLHttpRequest(); 
       TTrequest.open("GET", "http://cs.sfasu.edu/rball/351/exam2.php?name=TTinput.value", true); 
         TTrequest.send(); 

       TTrequest.onreadystatechange=function() { 
          if(TTrequest.readyState==4 && TTrequest.status==200) { 
            document.getElementById("myDiv").innerHTML=TTrequest.responseText; 
          } 
         } 
      }

, чтобы получить результат просто сделать это

TTrequest.send(); 
var response=TTrequest.responseText;

источник

2014-10-31 01:50:28 TheProvost

Я думаю, что одна из моих проблем - это мои функции. Я продолжаю получать сообщение об ошибке «TTrequest не определено» в «TTrequest.onreadystatechange = function() {« часть кода. Любые идеи, как я могу это исправить? –

ой не поймал это. Конечно, это не определено, поскольку вы определили переменную внутри своей функции, а затем вышли из нее. см. мой отредактированный код выше – TheProvost

Ну, это исправило это, но теперь я получаю все эти сообщения «NS_ERROR_FAILURE:», с одной посылкой «Слишком много рекурсии». Веб-консоль в основном выглядит как консоль в компиляторе, когда вы написали бесконечный цикл ... –

Я знаю, я не вижу тег JQuery, но рассмотреть его, если нет рамочных ограничений.

Пример:

$("button").click(function(){ 
    $.ajax({url:"demo_test.txt",success:function(result){ 
    $("#div1").html(result); 
    }}); 
});

источник

2014-10-31 03:19:54 Andrew

Использование AJAX для отправки и получения информации с сервера

ответ

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