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

Question

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

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

Answer 1

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

Ненавижу быть здесь «использовать jquery», но горб обучения jQuery для использования вызовов на основе AJAX очень низок до значения, которое вы получаете от таких вызовов.

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

Answer 2

Постарайтесь узнать больше об Ajax. Для этого существует множество библиотек.

Answer 3

Что вы ищете, это AJAX. jQuery делает многое из этого проще; try starting here.

Answer 4

Это как раз то, что делает AJAX: асинхронный JavaScript и XML. Он позволяет отправлять запросы на сервер без перезагрузки страницы.

Я рекомендую начать с jQuery, который, как вы заметили, имеет большую поддержку в сообществе StackOverflow, так же как и в других местах, и делает запросы Cross-browser 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 5

Существует хорошее introduction to JavaScript at Opera. Jibbering охватывает использование the XHR object, что является обычным способом отправки данных на сервер, не выходя из страницы. Библиотеки, такие как YUI или jQuery, могут сделать некоторые тяжелые работы для вас.

Answer 6

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

onblur="sendUpdate(this.value)" 

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

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

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

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

Answer 7

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

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

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

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

Answer 8

Вы, безусловно, требует JavaScript, и какой-то способ отправки запроса HTTP на РНР сервер без перезагрузки страницы. Как правило, это называется 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

Выбор текстовой элемент, обновляя его, потребуется использование 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 9

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

204 No Content 

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

Answer 10

Вы можете начать с добавления функции 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"; 
    } 

}