前端JavaScript動態更新div內容，如何將其傳遞給PHP后端并保存到數據庫？

前端JavaScript動態更新div內容，如何將數據傳遞給php后端并保存到數據庫？

本文介紹如何將JavaScript動態添加到div元素(id為imgs_url)中的圖片URL值傳遞給PHP頁面，并最終保存到mysql數據庫。

前端頁面使用id為”imgs_url”的div顯示上傳圖片的URL。JavaScript代碼利用uploader.on(‘uploadSuccess’, …)事件監聽器，在文件上傳成功后，將圖片URL添加到div中。 我們需要將此URL傳遞給PHP文件進行數據庫保存。

解決方案的核心是使用隱藏表單字段將JavaScript獲取的URL傳遞給PHP。

首先，修改JavaScript代碼，將獲取到的圖片URL賦值給一個隱藏的input表單元素，而不是直接添加到div中：

立即學習“PHP免費學習筆記（深入）”；

uploader.on('uploadSuccess', function(file, response) {   $('#imgs_url').val(response.imgurl);  });

其次，在包含JavaScript代碼的html表單中添加一個隱藏的input元素：

<input type="hidden" id="imgs_url" name="imgs_url" value="">

注意，這里的id和name屬性與JavaScript代碼中使用的選擇器保持一致。

然后，提交表單。 upload.php頁面可以通過$_POST[‘imgs_url’]獲取上傳的圖片URL。

最后，在upload.php中處理URL，例如將其保存到MySQL數據庫。為了方便后續頁面顯示，可以使用header()函數跳轉到另一個頁面，并通過URL參數傳遞圖片URL：

$next_page = "show_image.php?img_url=" . urlencode($_POST['imgs_url']); header("Location: $next_page");

urlencode()函數對URL進行編碼，防止特殊字符導致問題。 通過這些步驟，即可將JavaScript動態更新的div內容傳遞給PHP后端并保存到數據庫。