Блог

Главная - Вопросы по программированию - Как сделать активную веб-страницу

Как сделать активную веб-страницу

#javascript #php #web

#javascript #php #веб

Вопрос:

У меня есть текстовое поле на веб-странице, и я хочу, чтобы, когда пользователь что-то вводил в нем, отображал его без обновления.

Мой php-файл, который получает данные от пользователя и отображает их:

 <?php 
    $text = $_GET['text'];
    echo $text;
?>

и HTML-файл:

 <form method="Get">
    <input type="text" name="text">
</form>

Как заставить ее вводить $ text, когда пользователь вводит ввод.

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

1. Похоже, вам нужно посмотреть AJAX.

2. В вашей форме нет действия w3schools.com/tags/att_form_action.asp

3. Пожалуйста, попробуйте AJAX

Ответ №1:

Какой смысл использовать PHP и AJAX в этом случае? Если вы не сохраняете какие-либо данные из пользовательского типа в базе данных, я не вижу перемешивания.

Вы можете использовать простую функцию JavaScript, чтобы прочитать значение ввода и установить его как innerHTML любого элемента.

Посмотрите на этот JavaScript:

 document.querySelector('input[name="text"]').addEventListener('keyup', function(e){
  const input = e.target;
  document.querySelector('#result').innerHTML = input.value;
})

и эта структура HTML:

 <form method="Get">
    <input type="text" name="text">
</form>
<div id="result"></div>

Когда вы вводите входные данные, они автоматически дополняют [id=»result»] значением.

Это рабочая демонстрация: https://jsbin.com/hadevocoqo/edit?html ,js, вывод

Приветствую, слива!

Ответ №2:

Пожалуйста, используйте javascript (AJAX) для этого процесса.

Все, что вам нужно сделать, это сохранить файл php в отдельном файле и использовать AJAX для его подключения.

 <form method="Get">
<input type="text" name="text" onKeyUp="makeAjaxCall()" id="input">
    </form>



<script>
function makeAjaxCall() {
let input = document.getElementById('input').value;
if(input){
// make the ajax function call here
// Ajax response is injected into the document using innerHTML.
connectViaAJAX();
} else {
// no input is provided.
}
}



function connectViaAJAX() {
// write ajax here
}
</script>

Существуют и другие библиотеки javascript, которые вы можете проверить
Angular:http://angular.io /

VueJs: https://vuejs.org/

ReactJS:https://reactjs.org /

и многое другое.

Вы можете посетить:https://w3schools.com для получения дополнительных руководств по программированию