Что я пропустил, используя $ .post для простого теста ajax? - PullRequest
Новая
       12

Что я пропустил, используя $ .post для простого теста ajax?

0 голосов
/ 16 марта 2010

Играю с jquery впервые, и я пытаюсь заставить работать простой AJAX, чтобы лучше понять, как все работает. К сожалению, я не очень много знаю. Вот HTML-код со сценарием: 

<html>
<head>
 <title>AJAX attempt with jQuery</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
   function ajax(str){
   $("document").ready(function(){
     $.post("ajaxjquerytest.php",str,function(){
       $("p").html(response);
       });
     });
 </script> 
</head>  
<body>
 <input type="text" onchange="ajax(this.value)"></input> 
 <p>Age?</p>
</body>
</html>

А вот PHP, с которым он говорит: 

<?php
$age = $_POST['age'];

if ($age < 30)
  {
  echo "Young";
  }
else if ($age > 30)
  {
  echo "Old";
  }
else
  {
  echo "you're 30";
  }
?>

Ответы [ 6 ]

5 голосов
/ 16 марта 2010

Не уверен, имеет ли функция $.post() доступ к параметру str. Попробуйте вместо этого: 

<html>
<head>
 <title>AJAX attempt with jQuery</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
    $("document").ready(function(){
        $('input').change(function() {
             $.post("ajaxjquerytest.php",{'age': $(this).val()},function(response){
                 $("p").html(response);
             });
        });
    });
 </script> 
</head>  
<body>
 <input type="text" />
 <p>Age?</p>
</body>
</html>

Прикрепляет обработчик onChange к элементу ввода после полной загрузки DOM.

Ваш подход также должен работать, если вы пропустите $(document).ready(). Но присоединение функции JS к элементу - это больше, чем это делается с помощью jQuery.

Кроме того, вам нужно только обернуть код в $(document).ready(), который должен выполняться после построения всего дерева DOM. Ваш случай, вы определяете только функцию. Нет необходимости использовать готовый документ, так как функция не может быть вызвана, пока DOM не будет загружен.

Прочитайте документацию .post()!

4 голосов
/ 16 марта 2010

Я думаю, что проблема в том, что ответ не определен. Это должно быть передано в качестве параметра функции. Попробуйте это: 

function ajax(str){
    $.post("ajaxjquerytest.php",str,function(response) {
        $("p").html(response);
    });
}
2 голосов
/ 16 марта 2010

В опубликованном вами коде есть несколько проблем.

  1. Не похоже, что вы закрываете скобку на функции "ajax", поэтому вы должны получить ошибку JS при загрузке страницы.

  2. Вы должны написать

    function ajax(str){ $.post("ajaxjquerytest.php",str,function(){ $("p").html(response); }); } или используйте $(document).ready, как предложил Феликс

  3. Похоже, ваш PHP-код ожидает параметр с именем AGE, но вы явно не указали имя в своем коде, вам нужно создать класс JS с соответствующим именем, например, так: { AGE: str }. В документации jQuery .

  4. Кроме того, будьте осторожны с использованием ключевого слова this в JavaScript, оно может иметь совершенно разные значения в зависимости от контекста , используемого в . (Похоже, способ его использования описан в самом низу страницы.)

Может быть, проще начать с примера Феликса и продолжать работать оттуда.

1 голос
/ 16 марта 2010

Измените свою функцию следующим образом: 

function ajax(str){
    $("document").ready(function(){
        $.post("ajaxjquerytest.php",str,function(){
            $("p").html(response);
        });
    });
}

на: 

function ajax(str){
    $.post("ajaxjquerytest.php",str,function(){
        $("p").html(response);
    });
}

Сначала конструкция $(document).ready() выполняется при первой загрузке страницы.Во-вторых, «документ» не должен быть в кавычках.Наконец, вы можете добиться большего успеха с: 

<form>
    <input type="text" />
    <p>Age?</p>
    <input type="submit" />
</form>

и изменить: 

$('input').change(function() { ... }

на: 

$('form').submit(function() { ... }
1 голос
/ 16 марта 2010

Самый простой способ отладить подобные проблемы - использовать инструмент, позволяющий просматривать HTTP-запросы. Попробуйте сетевую панель в Firebug . Это позволит вам увидеть, на какой URL был сделан запрос, какие постданные были отправлены и каков был ответ сервера. Тогда вы узнаете, является ли код PHP или JS проблемой.

0 голосов
/ 16 марта 2010

Ваша функция ajax() подключает обработчик событий document#ready. document#ready сработало бы, когда ваша страница изначально загружена, и она никогда не запускается снова. Так что $.post никогда не выполнить. Просто измените свою функцию на это. 

function ajax(str){
     $.post("ajaxjquerytest.php",str,function(){
       $("p").html(response);
     });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...