Question

我有一个我在加载后编辑的页面，我想要做的是获取当前HTML页面并将其传递给PHP脚本。

我首先通过了document.documentElement.innerHTML但最终在顶部包含了一堆我不想要的计算式样式垃圾。谷歌搜索后，我发现我可以使用ajax获取服务器上当前文件的副本，然后替换编辑过的部分。

我可以使用以下方法获取文件的副本：

var url = window.location.pathname;
  var filename = url.substring(url.lastIndexOf('/')+1);

  $.ajax({
    url: filename,
    async: false,   // asynchronous request? (synchronous requests are discouraged...)
    cache: false,   // with this, you can force the browser to not make cache of the retrieved data
    dataType: "text",  // jQuery will infer this, but you can set explicitly
    success: function( data, textStatus, jqXHR ) {
        origPage = data; // can be a global variable too...
        // process the content...
    }
});

哪个工作正常，并获得我期望的html，并在记事本中查看页面时看到。

下一步是我无法弄清楚的。我想要做的就是将ID的innerHTML替换为id＆＃39;编辑器＆＃39;当前的价值是什么，所以我试过这个：

origPage.getElementById('editor').innerHTML = e.html;

但我收到错误＆＃34; TypeError：undefined不是函数＆＃34;。我必须做一些简单的错误我觉得但我不知道正确的格式来做到这一点。我尝试了以下变化：

alert($(origPage).getElementById('editor').innerHTML);
//Different attempt
var newHtml = $.parseHTML( origPage );
alert($(newHtml).getElementById('editor').innerHTML);
//Different attempt
alert($(origPage).html().getElementById('editor').innerHTML);

但我总是得到＆＃34; TypeError：undefined不是一个函数＆＃34;或＆＃34; TypeError：无法读取属性＆＃39; getElementById＆＃39;未定义＆＃34;。我该怎么做呢？

编辑：

下面的完整页面HTML：

＆＃13;

<!DOCTYPE html>
<html>

  <body>
    <div id="editor">
      <h1>This is editable.</h1>
      <p>Click me to start editing.</p>
    </div>
	

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="snapeditor.js"></script>
    <script type="text/javascript">
      var editor = new SnapEditor.InPlace("editor", {onSave: function (e) {
	  var isSuccess = true;
	  //var origPage = e.html;
	  var origPage;
	  var url = window.location.pathname;
	  var filename = url.substring(url.lastIndexOf('/')+1);
	  // Actually perform the save and update isSuccess.
	  
	  // Javascript:
	  $.ajax({
        url: filename,
        async: false,   // asynchronous request? (synchronous requests are discouraged...)
        cache: false,   // with this, you can force the browser to not make cache of the retrieved data
        dataType: "text",  // jQuery will infer this, but you can set explicitly
        success: function( data, textStatus, jqXHR ) {
            origPage = data; // can be a global variable too...
            // process the content...
        }
    });
	//origPage shows expected html as this point
	
	//alert($(origPage).getElementById('editor').innerHTML);
	//alert($(origPage).html().getElementById('editor').innerHTML);
	  $(origPage).getElementById('editor').innerHTML = e.html;//fails here
	  alert(origPage);
	  //alert(newHtml.getElementById('editor').innerHTML);
		$.ajax({
			data: {html: origPage, docName: 'example1.html'},
			url: 'savePage.php',
			method: 'POST', // or GET
			success: function(msg) {
				alert(msg);
				isSuccess = true;
			}
		});
	  return isSuccess || "Error";
	},
	
	onUnsavedChanges: function (e) {
	  if(confirm("Save changes?")) {
		if(e.api.execAction("save")){
			//location.reload();
		}
	  } else {
		e.api.execAction("discard");
	  }
	}});
    
    </script>
  </body>
</html>

＆＃13;

Answer 1

您似乎在变量中获得了用户的更改 - 您调用了var e.html。这不是一个好的变量名，BTW。如果可以，请将其更改为htmlEdited

问题：如果添加命令alert(e.html);，您会得到什么？您是否在用户编辑后看到了HTML？

如果是，那么您需要做的是将该变量发送到PHP文件，该文件将接收数据并将其粘贴到数据库中。

发送数据的代码：

<强>的javascript / jQuery的：

alert(e.html);  //you should see the user-edited HTML

$.ajax({
    type: 'post',
     url: 'another_php_file.php',
    data: 'userStuff=' + e.html,    //var_name = var_contents
    success: function(d){
        window.location.href = '';  //redisplay this page
    }
});

<强> another_php_file.php：

<?php
    $user_edits = $_POST['userStuff']; //note exact same name as data statement above

    mysql_query("UPDATE `your_table_name` SET `your_col_name` = '$user_edits' ") or die(mysql_error());

    echo 'All donarino';

AJAX javascript代码将var内容发送到名为another_php_file.php的PHP文件。

数据以$ user_edits的形式接收，然后插入MySQL数据库

最后，我假设如果重新显示该页面，它将再次从数据库中获取#editor div的内容？

这是您尚未提供足够信息的地方，也是我想查看您所有代码的原因。

您是否从数据库中填充了该div？如果没有，那么在刷新页面后，您希望如何更新页面？

您可以在phpacademy.org或thenewboston.com上做一些教程。做这两门（免费）课程，你就是专家：

https://phpacademy.org/videos/php-and-mysql-with-mysqli

https://phpacademy.org/videos/oop-loginregister-system

如果你需要做的只是插入e.html的内容来替换#editor div ，那么试试这个：

$('#editor').html(e.html);

但是，您需要一个事件来触发该代码。你能做到吗？

alert(e.html);

如果是这样，那么将第一位代码放在同一位置。如果没有，我们需要有关代码何时收到该变量的更多信息 - 这就是您放置$('#editor').html(e.html);语句的位置。

Javascript获取当前页面html（编辑后）

1 个答案: