Простой код AJAX не распознается

Question

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

HTML-:

<form action="/scripts/addemail_fb.php" method="post"> 
<input type="text" name="email" value="Enter your email here!" /> 
<input id="submit" type="submit" name="submit" value="Go!"  onClick="check(this.form.email.value);"/> 
</form> 

JS:

function check(email) { 


    if (window.XMLHttpRequest) { 
     req = new XMLHttpRequest(); 
    } 


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

    email=encodeURIComponent(email); 

    req.open("POST","/scripts/addemail.php"); 

    req.setRequestHeader(
     'Content-Type', 
     'application/x-www-form-urlencoded; charset=UTF-8'); 

    req.send(email); 

    req.onreadystatechange=function() { 

     if(req.readyState==4) { 

      result = req.responseText; 

      alert("The length of the email is:" + result); 

     } 

    } 

    return false; 

} 

РНР (addemail.php):

<?php 
function check_email($input) { 
    return strlen($input); 
} 
$email = urldecode(implode(file('php://input'))); 
$result = check_email($email); 
echo $result; 
?> 

И да, я включала JS в раздел. Я получил это почти непосредственно из учебника, поэтому я не уверен, что происходит. Мой браузер тестирования - Safari, но я также пробовал FF. Извините, это очевидно, так как это моя первая попытка AJAX. Благодаря!

EDIT: Извините, проблема в том, что он просто переходит к файлу, описанному в action = "addemail_fb" вместо JS.

-iMaster

Answer 1

Изменение onclick обработчик onsubmit (по форме), например так:

<form onsubmit="return check(this.email.value);"> ... </form> 

Кроме того, установите req.onreadystatechange перед вызовом req.send()

Answer 2

Вот проблема:

You are doing it wrong. 

И jQuery это ответ.

---

Но серьезно. Попробуйте использовать jQuery, так как это сделает жизнь Javascript проще, чем нарезать кусок тыквенного пирога.

AJAX является одним из самых раздражающих предметов в Javascript, а jQuery, наряду с другими библиотеками, ушел и затруднил проблему. Кроме того, есть много других замечательных функций jQuery, которые просто делают его намного более прекрасным для работы с Javascript.

В JQuery, весь код будет выглядеть следующим образом:

$.post("/scripts/addemail.php", {email_address:email}, function(data){ 
    alert("The length of the email is:"+data); 
}); 

Говоря тыквенный пирог .....

---

Теперь, когда я закончил свое заявление общего сервера для JQuery, вам нужно будет проверить консоль Javascript (Ctrl + Shift + J в Firefox) и запустить страницу. Это даст вам любые ошибки, которые вы обязаны иметь, например, синтаксические ошибки или другие другие ошибки.

Если вы можете пойти туда, а затем дать нам всплывающее сообщение об ошибке, мы с большей вероятностью разрешим вашу проблему.

Answer 3

встроенный браузер плохая практика. это решение может показаться немного более запутанным, но если вы его внедрите в остальные ваши скрипты, то вы найдете это гораздо более элегантным. библиотеки JS используют подобные методы, но если вы не можете использовать один, то сделать это вместо того, чтобы:

onDomReady(function(){ 

    var oForm = document.getElementById("myform"); 

    addListener(oForm,"submit",function(){ 

     removeListener(oForm,"submit",arguments.callee); 
     // do stuff here 

    }); 

}); 

// Cross-browser implementation of element.addEventListener() 
function addListener(element, type, expression, bubbling) 
{ 
    bubbling = bubbling || false; 

    if(window.addEventListener) { // Standard 
     element.addEventListener(type, expression, bubbling); 
     return true; 
    } else if(window.attachEvent) { // IE 
     element.attachEvent('on' + type, expression); 
     return true; 
    } else return false; 
} 

// Cross-browser implementation of element.removeEventListener() 
function removeListener(element, type, expression, bubbling) 
{ 
    bubbling = bubbling || false; 

    if(window.removeEventListener) { // Standard 
     element.removeEventListener(type, expression, bubbling); 
     return true; 
    } else if(window.detachEvent) { // IE 
     element.detachEvent('on' + type, expression); 
     return true; 
    } else return false; 
} 

function onDomReady(fn) { 

    // Mozilla, Opera and webkit nightlies currently support this event 
    if (document.addEventListener) { 

     // Use the handy event callback 
     document.addEventListener("DOMContentLoaded", function(){ 

      document.removeEventListener("DOMContentLoaded", arguments.callee, false); 
      fn(); 


     }, false); 

    // If IE event model is used 
    } else if (document.attachEvent) { 

     // ensure firing before onload, 
     // maybe late but safe also for iframes 
     document.attachEvent("onreadystatechange", function(){ 
      if (document.readyState === "complete") { 
       document.detachEvent("onreadystatechange", arguments.callee); 
       fn(); 
      } else {  
       setTimeout(arguments.callee, 0); 
       return; 
      } 
     }); 

    } else { 

     // A fallback to window.onload, that will always work 
     addListener(window,"load",fn); 

    } 

}