前端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后端并保存到数据库。