将innerhtml保存为允许保存页面上的所有元素

时间:2013-09-15 05:12:58

标签: javascript php ajax

我需要保存一个动态更改内容的网页。例如,用户可以添加自定义函数,并将它们添加到自定义函数下拉列表中。我想使用PHP和AJAX保存“新”更新的页面。我尝试通过将它们包装在“main-body”div中来获取所有元素的innerHTML。当我使用警告框显示结果时,似乎捕获了所有数据。但是当我使用POST AJAX方法将数据发布到我的savedata.php文件时,数据不会被保存。仅保存数据的前几行。

选择框中的新选项和textarea的内容也不会保存。但是,如果我单独尝试保存textarea并使用.value而不是innerHTML选择框数据。

我的问题简而言之,就是为什么不使用documentGetById(“main-body”)来显示所有数据时,innerHTML数据不会被保存.internalHTML获取我的所有内容页。这是一些代码

Javascript和AJAX代码

function savehtml()
{
  //Make ajax call after setting up variables
  var saveme=document.getElementById('txtArea').innerHTML
  var filename = document.getElementById('nameoff').value
  var parameters="saveme="+saveme+"&filename="+filename
  ajaxr('savedata.php', "result", parameters)
}

function ajaxRequest() {
  var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] 
  if (window.ActiveXObject) { 
    for (var i=0; i<activexmodes.length; i++) {
      try {
        return new ActiveXObject(activexmodes[i])
      }
      catch(e) {
        //suppress error
      }
    }
  }
  else if (window.XMLHttpRequest) // if Mozilla, Safari etc
    return new XMLHttpRequest()
  else
    return false
}

function ajaxr(phpfilename, idofinnerhtml, parameters)
{
  var mygetrequest=new ajaxRequest()
  mygetrequest.onreadystatechange=function() {
    if (mygetrequest.readyState==4) {
      if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1) {
        alert(parameters)
        document.getElementById(idofinnerhtml).innerHTML="Result: "+mygetrequest.responseText
        /*document.getElementById("catbody").value="Result : "+mygetrequest.responseText*/
      }
      else {
        document.getElementById(idofinnerhtml).innerHTML="Result: Failed "
      }
    }
  }

  mygetrequest.open("POST", phpfilename, true)
  mygetrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
  mygetrequest.send(parameters)
}

HTML代码

<body>

<div id="main-body">

<table>
 <tr>
 <td>

<textarea id="txtArea" name="txtArea" rows="10" cols="100"><?

  ?></textarea><br><br>
 </td>

     <h2>Quick tools</h2>
     <button onclick="addsigns();">Add a sign</button><br>
       <input type="radio" id="andsign" name="whichsign" value="&&">&&
     <input type="radio" id="orsign" name="whichsign" value="||">||
   <input type="radio" id="notsign" name="whichsign" value="!">!
....
<td>
<h2>Save file</h2>
<input id="nameoff" type="text">
<button onclick="savehtml();">Save html</button><br>
</td>

Php Code

$data=$_POST['saveme'];
$filename=$_POST['filename'];

echo $data;

$handle = fopen($filename, 'w+');

flock($handle, LOCK_EX); 

fwrite($handle, $data);

flock($handle, LOCK_EX); 

fclose($handle);

问题已解决:

猜猜我似乎已经弄明白了这个问题。这个问题是由于同时使用两个浏览器造成的。显然,即使在innerHTML中,Internet Explorer 8也显示了textarea的值,但Firefox却没有。因此,当您使用Internet Explorer保存数据时,您可以在调用innerHTML时存储该值。至于firefox,你需要使用.value来获取textarea的值,因为innerHTML不会包含它。由于我在两个浏览器中进行测试,我必须查看一个认为在另一个浏览器中相同的警报innerHTML代码,然后用另一个浏览器的代码覆盖我的文件。无论如何,感谢那些贡献者的帮助。希望它可以帮助那些和我一样处于类似问题的人。

1 个答案:

答案 0 :(得分:0)

删除此行上的“+”(不读取任何内容):

$handle = fopen($filename, 'w+');

您要写入的文件/文件夹需要具有服务器可以访问的写入权限。