使用textarea內容更新MySQL而不重新加載

我正在構建一個加載我們的MySQL數據庫內容進行編輯的頁面。表中的每一行都位於頁面上一個單獨的，可編輯的textarea中。我需要用戶能夠更新每一行（即將其內容發送到數據庫），而無需重新加載整個頁面，只需單擊一個負責該特定文本區域的按鈕即可。使用textarea內容更新MySQL而不重新加載

我的理解是這樣的過程會涉及一些JavaScript，但可悲的是，我知道沒有 - 我做了所有我可以用PHP，所以我需要在這個方向的指向。基本上我的問題（我認爲）是如何從已編輯的textarea中獲取文本並將其發送到MySQL而無需重新加載頁面。如果我朝着錯誤的方向前進，我會非常樂意聽取其他建議。

來源

2009-08-25 MeLight

是的這將需要JavaScript。即一個異步調用你的PHP頁面。這通常被稱爲AJAX。

我討厭成爲這裏的「使用jquery」的答案，但學習jQuery使用基於AJAX的調用的峯值對於你從這樣的調用中獲得的價值是非常低的。

的文檔具有great examples，其中大部分是非常簡單的。

來源

2009-08-25 10:23:09

沒有什麼錯是當我讀它，我在想「使用jQuery」的答案:) – Waggers 2009-08-25 10:33:39

，請讓別人說使用jQuery，因爲我」我已經在兩天內完成了兩次！ – Dorjan 2009-08-25 10:54:10

-1

嘗試閱讀關於Ajax的更多信息。它有很多的庫。

來源

2009-08-25 10:23:12

你要找什麼是AJAX。 jQuery使這很容易; try starting here.

來源

2009-08-25 10:23:47 Randy

這正是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是一個很好的開始。

來源

2009-08-25 10:24:47 VoteyDisciple

這是一個很好introduction to JavaScript at Opera。 Jibbering涵蓋了使用the XHR object，這是在不離開頁面的情況下將數據發送到服務器的常用方式。諸如YUI或jQuery等庫可以爲您做一些繁重的工作。

來源

2009-08-25 10:25:14 Quentin

您可以JavaScript事件添加到textarea的：當用戶完成編輯的文本並離開輸入會發生

onblur="sendUpdate(this.value)"

此事件。

在示例中，「this」引用當前textarea組件。

然後使用Ajax，如前所述。一個例子是：

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

來源

2009-08-25 10:34:34

您需要從您的腳本（JavaScript）異步調用服務器。使用ajax來實現這一點。您需要查看使用XMLhttp對象與客戶端腳本（javascript）與服務器/數據庫進行通信。您不需要使用按鈕單擊來提交整個頁面，而是您可以在按鈕單擊事件或onBlur事件或onTextChange事件等中調用javscript代碼...

jQuery是一個JavaScript框架庫，可幫助您減少執行此操作的代碼行數。但它不一定需要使用jQuery。您可以在不使用jQuery的情況下執行ajax調用.jQuery的使用將減少行數。

入住這

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

來源

2009-08-25 10:38:27 Shyju

你一定會需要的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

來源

2009-08-25 10:45:23 bucabay

你可以這樣做精沒有JavaScript。只要有各自的textarea +按鈕，在自己的<形式>，然後提交表單，更新從textarea的值數據庫的腳本，並返回一個：

204 No Content

狀態，而不是200 OK和一個新的頁面。舊頁面將保持放置狀態。

來源

2009-08-25 12:30:50 bobince

一般而言，即使您使用AJAX，這也是一種有趣的無JavaScript回退策略。 – 2009-08-26 17:19:53

您可以通過添加一個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"; 
    } 

}

來源

2017-06-29 12:12:24 Josh

使用textarea內容更新MySQL而不重新加載

回答

相關問題