如何通过JavaScript / XMLHttpRequest将一大块html发送到服务器?

时间:2017-04-28 11:40:49

标签: javascript php xmlhttprequest

我想使用XMLHttpRequest向服务器发送一大块html。我的大块是:

<body id="publish">
<p>Vous avez à parler à vous même</p>
<input type="button" name="Submit" value="Submit" onClick="SaveDomHTML()">
</body>

此块由“内容”中的JavaScript打包,并通过PHP脚本传输到服务器。我遇到的问题是,当我尝试通过php打印服务器端文件中的“内容”时:

fwrite($fh, $content);

我得到以下内容而不是我的html块。

[object HTMLBodyElement]

此外,php gettype($ content)给出字符串而不是对象!!!

我已经四处寻找解决方案,例如:

  How to get innerHTML of DOMNode?
  http://stackoverflow.com/questions/2087103/how-to-get-innerhtml-of-domnode

  Send POST data using XMLHttpRequest
  http://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest

但他们都没有为我工作。

非常感谢任何解决问题的帮助。

我的完整文件,这要归功于答案1,但是在JavaScript中而不是在jquery中:

<!doctype html>
<html lang="fr">
<head>
<meta charset="iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" charset="iso-8859-1">
function SaveDomHTML(){
"use strict";   
var content =  document.getElementById('publish');
console.log("content:", content);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/cgi-bin/domsave.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () { 
    if (this.readyState === 4 || this.status === 200){ 
        console.log(this.responseText);
    }
};
xhr.send("content=" + content);
}
</script>
</head>
<body id="publish">
<p>Vous avez à parler à vous même</p>
<input type="button" name="Submit" value="Submit" onClick="SaveDomHTML()">
</body>
</html>

Php文件:

<?php
$user_dom_html = 'user_dom_'.time().'.html'; 
$fh = fopen($user_dom_html, 'w');
echo $user_dom_html; 
$content = $_POST['content']; 
fwrite($fh, $content);
fclose($fh);
?>

1 个答案:

答案 0 :(得分:0)

服务器端功能步骤。

  • 第一步 - 您需要为用户创建(注册)和登录功能以获得用户身份。
  • 第二步 - 用户可以创建自定义HTML DOM。根据您的UI功能生成任何HTML。
  • 第三步 - 我们需要在相关用户的服务器中存储数据,例如user_id和他的DOM(HTML)

第三步子点。

需要定位到您的html DOM部分

客户端js代码。

 $(document).ready(function() {
     $('#submit').click(function(e) {
     e.preventDefault();
       var content = $('#html_dom').html(); 

            $.ajax({
                  type: 'POST',
                  url: 'dom_sever_file.php',
                  data: {content: content}
                  }).done(
                        function( data ){
                            if(result){console.log("success")};
                        }
                  );
          });
     });

服务器端php代码。

//get auth user.
$user_session_id = $_SESSION['user_id'];

$user_dom_html = "user_dom_".time()."html"; 
$fh = fopen($user_dom_html, 'w'); 
$stringData = $_POST['content'];   
fwrite($fh, $stringData);

//need to store only html file name and user id in mysql
//this part will be your mysql connection and insert query.
  • 第四步 - 查看DOM - 检查服务器端,如user_id = 1,有任何过去的DOM可用,然后将其显示给用户DOM列表部分。