前端JavaScript動(dòng)態(tài)更新div內(nèi)容，如何將其傳遞給PHP后端并保存到數(shù)據(jù)庫？

前端JavaScript動(dòng)態(tài)更新div內(nèi)容，如何將數(shù)據(jù)傳遞給php后端并保存到數(shù)據(jù)庫？

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

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

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

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

立即學(xué)習(xí)“PHP免費(fèi)學(xué)習(xí)筆記（深入）”；

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

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

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

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

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

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

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

urlencode()函數(shù)對(duì)URL進(jìn)行編碼，防止特殊字符導(dǎo)致問題。 通過這些步驟，即可將JavaScript動(dòng)態(tài)更新的div內(nèi)容傳遞給PHP后端并保存到數(shù)據(jù)庫。