2014-01-19 8 views
0

Моя TA сообщает, что GET-запрос по следующему коду AJAX отправляется дважды. Но я не понимаю, как и не могу это исправить. Каков общий подход, как справиться с этим?Код AJAX, отправляющий запрос GET дважды

Это простая страница с полем поиска с советами по мере ввода. Проблема должна быть где-то в функции getByPrefix.

JS код:

function set(arg) 
{ 
    var searchtext = document.getElementById("searchtext"); 
    searchtext.value = arg.innerHTML; 
    showMatches(searchtext); 
} 

function getByPrefix(prefix, callback) 
{ 
    var prefixes = []; 

    if (window.XMLHttpRequest) 
     xmlhttp = new XMLHttpRequest(); 

    xmlhttp.onreadystatechange = function() 
    { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
     { 
      var response = JSON.parse(xmlhttp.responseText); 

      for (var i = 0; i < response.length; i++) // prepsani do jednoducheho indexovaneho pole 
      { 
       prefixes.push(response[i].drug); 
      } 

      callback(prefixes);   
     } 
    } 

    xmlhttp.open("GET","prefixes.php?q="+prefix,true); 
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'); 
    xmlhttp.setRequestHeader('Cache-Control', 'no-cache'); 
    xmlhttp.send(); 
} 

function action2(text) 
{ 
    getByPrefix(text.value, showMatches); 
} 

function showMatches(text) 
{ 
    var matches = text; 

    var form = document.getElementById("search"); 
    var results = document.getElementById("results"); 

    if (results != null) 
     form.removeChild(results); 

    var div = document.createElement("div"); 
    div.id = "results"; 

    for (var i =0; i < matches.length; i++) 
    { 
     var p = document.createElement("p"); 
     p.className = "hidden"; 
     p.onclick = (function(a) { return function(){ set(a); }})(p); 
     p.innerHTML = matches[i]; 

     div.appendChild(p); 
    } 

    if (matches.length>1 && text.value != "") 
     form.appendChild(div); 

    if (matches.length==1 && text.value != matches[0]) 
     form.appendChild(div); 
} 

PHP код:

<?php 
function head() 
{ 
    global $db; 
?> 
<head> 
    <title>Search</title> 
    <?php head_common(); ?> 
    <script type="text/javascript" src="js/main.js"></script> 
</head> 
<?php 
} 

function body() 
{ 
?> 
<body> 
    <?php heading(); ?> 
    <div> 
    <img src="img/logo.jpg" height="200" width="400"> 
    <form id="search" method="get" action="index.php"> 
     <p> 
      <input name="page" value="results" type="hidden"> 
      <input name="part" value="1" type="hidden"> 
      <input name="hledej" id="searchtext" autocomplete="off" onKeyUp="action2(this)" type="text"> 
      <button>Hledej</button> 
     </p> 
    </form> 
    </div> 
    <?php footer(); ?> 
</body> 
<?php 
} 
?> 
+0

Для проверки используйте Js Console Firebug или Chrome, установите точку разрыва в определении функции, и вы увидите, когда она ее отправляет. – Chococroc

+1

_ «Проблема должна быть где-то в функции getByPrefix.» _ - Нет это не так. Мне кажется, что 'getByPrefix()' сделает один вызов ajax. Но вы вызываете его в ответ на каждое событие keyup, так как пользователь типа 'getByPrefix()' будет вызываться повторно. (В стороне, в чем смысл тестирования 'if (window.XMLHttpRequest)', если нет другого случая, если этот объект не существует?) – nnnnnn

+0

Да, вы можете ввести одно письмо, но если это капитал, вам нужно удерживайте shift, и после отпускания его 'keyup' запускается дважды. – Karol

ответ

2

Вы, вероятно, введя заглавную букву, с SHIFT ключом, поэтому, как только вы отпустите клавиши со стрелками keyup событие вызывается дважды у вас есть 2 AJAX запросов.

Вы можете отфильтровать нажатые клавиши, используя параметр eventData. Для SHIFT ключевой взгляд here.

+0

Ну, а как фильтровать, если keyup - только char? – alop789312

+1

@ jb91 Посмотрите на изменения и предложите следующий вопрос. – Karol

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