Блог

Главная - Вопросы по программированию - Запрос AJAX и добавление в список после нажатия enter

Запрос AJAX и добавление в список после нажатия enter

#php #ajax

#php #аякс

Вопрос:

Я пытаюсь отправить и ввести текстовое значение на СТРАНИЦУ PHP через ajax, когда пользователь нажимает Enterклавишу.

Идея заключается в:

  • Пользователь вводит код во ВВОДИМЫЙ ТЕКСТ
  • Пользователь нажимает Enter
  • AJAX вызывает ДЕЙСТВИЕ.PHP и передает значение ВХОДНОГО ТЕКСТА
  • Экшен.PHP возвращает и содержимое HTML (через базу данных)
  • HTML-контент добавляется на страницу, которая вызвала ДЕЙСТВИЕ.PHP через ajax.

Другая проблема заключается в том, что я хотел бы добавить 1 или более элементов в список и не ПЕРЕЗАПИСЫВАТЬ его…

У меня есть этот код:

 <script type="text/javascript">

 $(document).ready(function() {

    $(".code").bind("enterKey",function(e){                

      $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "ACTION.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").html(response); 
            //alert(response);
        }

    });
});
});

</script>

<input name="code" class="code" type="text" name="code" />

<div id="responsecontainer"></div>

И МОЕ ДЕЙСТВИЕ PHP выглядит следующим образом:

 <?php
/* connection to database code is here.. just remove because isn't necessary */

/* Query code is here too */

echo $line['nome'];

?>

Как вы можете видеть, $(".code").bind("enterKey",function(e){ это НЕ работает, и я не знаю, как изменить DIV #responsecontainer на СПИСОК <ul><li></li></ul> и добавить новый <li> к каждому запросу.

Комментарии:

1. Нет никакого enterKey события. Используйте keyup событие и проверьте код ключа, чтобы убедиться, что это Return ключ.

2. Вам не хватает data: опции $.ajax() для передачи значения ввода.

Ответ №1:

Свяжите keydown событие и проверьте код ключа, чтобы убедиться, что это Enterключ. Затем вам нужно перейти this.value к PHP-скрипту, используя data: опцию.

 $(function() {
    $(".code").keydown(function(e) {
        if (e.keyCode == 13) {
            $.ajax({
                type: "GET",
                url: "ACTION.php",
                data: { code: this.value },
                dataType: "HTML",
                success: function(response) {
                    $("#responsecontainer ul").append($("<li>", { html: response }));
            });
        }
    });
});

Вы должны изменить свой HTML на:

 <div id="responsecontainer">
<ul></ul>
</div>

Тогда приведенный выше AJAX-код сможет добавлять <li> элементы в этот список.

Метки: