Обновление MySQL с содержимым textarea без перезагрузки

Question

Я создаю страницу, которая загружает содержимое нашей базы данных MySQL для редактирования. Каждая строка таблицы находится в отдельной редактируемой текстовой области на странице. Мне нужно, чтобы пользователь мог обновлять каждую строку (то есть отправлять ее содержимое в БД) без перезагрузки всей страницы одним нажатием кнопки, отвечающей за эту конкретную текстовую область.

Я понимаю, что такая процедура потребует некоторого JavaScript, но, к сожалению, я не знаю ни одного - я сделал все, что мог с php, поэтому мне нужно указывать в этом направлении. По сути, мой вопрос (я думаю) заключается в том, как мне получить текст из отредактированной текстовой области и отправить его в MySQL без перезагрузки страницы. Если я иду в неправильном направлении, я буду более чем готов услышать другие предложения.

Answer 1

Да, для этого потребуется JavaScript. А именно, асинхронный вызов страницы PHP у вас есть. Это часто называют AJAX.

Я не хочу быть здесь "использовать jquery", но горб от изучения jQuery для использования вызовов на основе AJAX очень низок по сравнению со значением, которое вы получаете от таких вызовов.

В документации есть замечательных примеров , и большинство из них довольно просты.

Answer 2

Именно это и делает AJAX: асинхронный JavaScript и XML. Позволяет отправлять запросы на сервер без перезагрузки страницы.

Я бы порекомендовал начать с jQuery , который, как вы заметите, имеет большую поддержку в сообществе StackOverflow, а также в других местах, и который делает кросс-браузерные запросы AJAX очень легкими.

С помощью скрипта jQuery на своей странице вы можете сделать что-то вроде этого:

$("#id-of-the-button-the-user-will-click").click(function() {
    $.post('/path/to/your/script.php', { field1: value1, field2: value2 }, function(data) {
        // This function is called when the request is completed, so it's a good place
        // to update your page accordingly.
    });
});

Понимание деталей по-прежнему требует глубокого понимания JavaScript, поэтому действительно лучше всего погрузиться и начать писать (и, следовательно, изучать) много JavaScript. AJAX - отличное место для старта.

Answer 3

В Opera есть хорошее введение в JavaScript. Jibbering охватывает использование объекта XHR , который является обычным способом отправки данных на сервер, не покидая страницы. Такие библиотеки, как YUI или jQuery могут сделать для вас часть тяжелой работы.

Answer 4

Вы можете начать с добавления функции jquery, чтобы получить любые сделанные изменения, например:

$('#inputelement').on('input propertychange', function(){
            alert("Alert to test jquery working");
        });

Затем вы должны использовать AJAX для создания php-скрипта с данными (так как php - это то, как вы обновляетесь на сервере) и отправлять с помощью переменной GET или POST. Затем используйте этот файл сценария для загрузки изменений на свой сервер. например,

$('#yourElement').on('input propertychange', function(){

       $.ajax({
          method: "POST",
          url: "updatedatabase.php",
          data: {content: $("#yourElement").val()}
        })
          .done(function( msg ) {
            alert( "Data Saved: " + msg );
      });

    });

Загрузка скрипта:

session_start();

    if(array_key_exists("content", $_POST)){

    include("connection.php");//link to your server

    $query = "UPDATE `users` SET `updateColumn`= '".mysqli_real_escape_string($link, $_POST['content'])."' WHERE id= ".mysqli_real_escape_string($link, $_SESSION['id'])." LIMIT 1";

    if(mysqli_query($link, $query)){
        echo "success";

    }else {
        echo "failed";
    }

}

Answer 5

Вы можете сделать это нормально без JavaScript. Просто поместите каждую кнопку textarea + в собственную , затем отправьте форму в скрипт, который обновляет базу данных из значения textarea и возвращает:

204 No Content

статус вместо 200 OK и новая страница. Старая страница останется на месте.

Answer 6

Вам определенно потребуется JavaScript и какой-то метод отправки HTTP-запроса на ваш PHP-сервер без перезагрузки страницы. Как правило, это называется AJAX.

Вероятно, лучше всего использовать библиотеку JavaScript, поскольку AJAX немного сложен для начинающих разработчиков JavaScript. Хороший выбор - JQuery или MooTools

AJAX-библиотеки обычно используют XMLHttpRequest или JSONP для реализации HTTP-запросов. Понимание этого должно сделать это немного легче.

• JQuery AJAX: http://docs.jquery.com/Ajax
• MooTools AJAX: http://mootools.net/docs/core/Request/Request

Выбор элемента textarea, его обновление, потребует использования DOM (http://www.w3.org/DOM/).). Большинство платформ JavaScript теперь используют реализацию CSS или XSLT. селекторы для запроса DOM.

• Селекторы JQuery : http://docs.jquery.com/Selectors
• Селекторы MooTools: http://mootools.net/docs/core/Utilities/Selectors

Answer 7

Вам необходимо делать асинхронные вызовы на сервер из вашего скрипта (javascript). Для этого используйте ajax. Вам нужно взглянуть на использование объектов XMLhttp для связи с сервером / базой данных из вашего клиентского скрипта (javascript). Вам не нужно отправлять всю страницу, используя нажатие кнопки, вместо этого вы можете вызывать код javscript в событии нажатия кнопки, событии onBlur или onTextChange и т. Д. ...

jQuery - это библиотека фреймворка javascript, которая помогает вам сократить количество строк кода для реализации этого. Но не обязательно использовать jquery. Вы можете выполнять ajax-вызовы без использования jquery. Использование jQuery сократит количество строк.

Проверьте это

http://docs.jquery.com/Ajax/jQuery.ajax

Answer 8

Вы можете добавить событие JavaScript в textarea:

onblur="sendUpdate(this.value)"

Это событие произойдет, когда пользователь закончит редактирование текста и покинет ввод.

В примере «this» ссылается на текущий компонент textarea.

А затем используйте Ajax, как упоминалось ранее. Примером может быть:

function sendUpdate (text) {
  $.post('script.php', {textarea_value:text},function(){});
}

Answer 9

То, что вы ищете, это AJAX. JQuery делает многое из этого легче; попробуйте начать здесь.

Answer 10

Попробуйте прочитать больше о Ajax. Для этого есть много библиотек.