使用 PHP、Ajax、jQuery 将当前 DOM 保存到服务器上的文件？答案

【问题标题】：Save Current DOM to file on server using PHP, Ajax, jQuery?使用 PHP、Ajax、jQuery 将当前 DOM 保存到服务器上的文件？
【发布时间】：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();

标签： php jquery ajax dom domdocument

【解决方案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);

实际上比我想象的要简单得多。

【讨论】：