如何通过JavaScript/XMLHttpRequest将html块发送到服务器？_Javascript_Php_Xmlhttprequest

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

javascript php

如何通过JavaScript/XMLHttpRequest将html块发送到服务器？,javascript,php,xmlhttprequest,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> 我得到以下内容，而不是我的html块 [object HTMLBodyEle

我想使用XMLHttpRequest向服务器发送一块html。我得到的信息是：

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

我得到以下内容，而不是我的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>


无标题文件
函数SaveDomHTML（）{
“严格使用”；
var content=document.getElementById（'publish'）；
console.log（“内容：”，内容）；
var xhr=new XMLHttpRequest（）；
open（“POST”，“/cgi-bin/domsave.php”，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
xhr.onreadystatechange=函数（）{
如果（this.readyState==4 | | this.status==200）{
console.log（this.responseText）；
}
};
xhr.send（“内容=”+内容）；
}
你有空吗

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);
?>

服务器端功能步骤

第一步-您需要为用户身份创建（注册）和登录功能
第二步-用户能够创建自定义HTML DOM。根据用户界面功能生成任何HTML
第三步-我们需要在服务器中与相关用户一起存储数据，比如用户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列表部分

你尝试了什么？你在js函数中做了什么？使文章更具可读性。我已经更新了我的问题。请考虑一下。谢谢。你的假设是正确的，我的问题在第三步，我需要在服务器上保存用户DOM（HTML）的指导。我已经更新了我的答案，请按照它@mansourghafharzadeh进行操作。非常感谢。然而，是否可以为我提供纯js代码而不是JQUERY？我现在在第$stringData=“you html code php code goes here”行的php代码中遇到了问题；我需要把ajax发送的“内容”（content）放在这里。如何处理$stringData=？。提前感谢您的帮助help@MansourGHAFFARZADEH我已经更新了答案，请检查。您已经通过post进行了ajax调用，然后您可以使用$\u post['content']访问HTML内容数据。

//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.