使用 PHP、Ajax、jQuery 将当前 DOM 保存到服务器上的文件?
Posted
技术标签:
【中文标题】使用 PHP、Ajax、jQuery 将当前 DOM 保存到服务器上的文件?【英文标题】:Save Current DOM to file on server using PHP, Ajax, jQuery? 【发布时间】:2020-08-04 18:37:03 【问题描述】:我到处搜索,但到目前为止,我找到的每个解决方案都对我不起作用。
我正在构建一个网站应用程序,人们可以在其中创建自己的幻灯片。当用户单击保存按钮时,我希望将当前 DOM 保存为我的 Web 服务器上的 html 文件。
我尝试的第一种方法使用 Ajax,但没有返回任何内容:
AJAX
function chk()
var elHtml = document.getElementById('dropzone').innerHTML;
console.log("inside chk");
$.ajax(
type: "POST",
url: 'https://www.tap-plus.org/wp-content/themes/Avada/softwarefiles/savefile.php',
dataType: 'json',
data: functionname: 'write_to_server', arguments: [elHtml] ,
cache:false,
success: function (obj)
if( !('error' in obj) )
$('#msg').html(obj);
else
console.log(obj.error);
);
return false;
保存文件.php
function write_to_server($html_code)
$html_string = $_POST['arguments'][0];
var_dump($html_string);
echo 'test';
html
<input type="submit" id="saving" class="btn btn-primary pull-right" value="Save2" onclick="return chk()"/>
上述方法不返回任何内容。我尝试的第二种方法是使用当前网站 URL 的loadHTMLFile
获取当前 DOMDocument。返回 null。
DOMDocument
$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTMLFile('https://https://www.tap-plus.org/tapplus-software/');
var_dump($dom);
结果:
object(DOMDocument)#3045 (35) ["doctype"]=> NULL ["implementation"]=> string(22) "(object value omitted)" ["documentElement"]=> NULL ["actualEncoding"]=> NULL ["encoding"]=> NULL ["xmlEncoding"]=> NULL
另外,如果可能的话,我想在不重新加载页面的情况下完成此操作。因为理想情况下,如果有人在他们正在处理的幻灯片上点击保存按钮,他们不希望页面突然重新加载。 我不确定我做错了什么,或者下一步将如何解决这个问题。提前致谢。
【问题讨论】:
你没有从savefile.php
返回JSON。
当脚本应该返回 JSON 时,你为什么要做var_dump($html_string)
?
我应该从 ajax 中删除 dataType: JSON 吗?我只是想将 HTML 解析为可以保存为文件的字符串。
如果您删除它,那么您将无法执行if (!('error' in obj))
,因为您没有返回 JSON 对象。
如何使用这个:var elHtml = $('#dropzone').val();
【参考方案1】:
PHP 应该回显 JSON,而不是 HTML 输入。
function write_to_server($html_code)
$html_string = $_POST['arguments'][0];
echo json_encode(array('msg' => 'Data saved successfully'));
jQuery 代码应该会显示消息。
if( !('error' in obj) )
$('#msg').html(obj.msg);
else
console.log(obj.error);
【讨论】:
我试过这个,但不幸的是我没有得到任何回报。 检查“网络”选项卡的“响应”部分,确保在 JSON 之前或之后没有返回任何内容。 我在网络选项卡中看到的唯一内容是引导程序和 jquery UI。 我看到了我的“inside chk”打印语句的console.log,但就是这样 您没有看到它发送到savefile.php
?控制台有错误吗?【参考方案2】:
解决了!这是我单击保存按钮、返回特定元素的 html 代码并防止页面刷新的解决方案:
AJAX
var url = '/savefile.php';
function chk()
var elHtml = document.getElementById('outer-content').innerHTML;
console.log("inside chk");
$.ajax(
type: "POST",
url: url,
data: myCode: elHtml ,
success: function (obj)
console.log("success outer");
$('#msg').html(obj);
console.log("success");
);
console.log(url);
return false;
PHP
$html_val = $_POST[ 'myCode' ];
var_dump($html_val);
实际上比我想象的要简单得多。
【讨论】:
以上是关于使用 PHP、Ajax、jQuery 将当前 DOM 保存到服务器上的文件?的主要内容,如果未能解决你的问题,请参考以下文章
使用 jQuery AJAX 和 PHP 将 div 的内容保存到新文件
使用 JavaScript/jQuery 调用 do_action