如何使用AJAX / JQuery / PHP将DIV内容保存到HTML文件？

Question

I am struggling with getting this code to work. 我正在努力使此代码正常工作。 My intention is to be able to save the contents of a div to an html file, so that I can recall it later... It works partially, in that if I change $data=$_POST['id'] to $data=$_POST['memory'] in readInput.php it will indeed save any text I enter into the input named 'memory' to an html file, and will correctly save the file with whatever name I give it. 我的意图是能够将div的内容保存到html文件中，以便以后再调用...它部分起作用，因为如果我将$data=$_POST['id']更改$data=$_POST['memory']在readInput.php它的确会将我输入到名为“ memory”的输入中的所有文本保存到html文件中，并将正确保存该文件名。 Where it fails is if I try to grab the data of DIV 'readDiv' and its contents $data=$_POST['id']; 如果我尝试获取'readDiv' $data=$_POST['id'];及其内容$data=$_POST['id'];失败了$data=$_POST['id']; it will save a blank html page, with whatever name I gave it... Here is the code: 它会保存一个空白的html页面，无论我给它起什么名字……这是代码：

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>readInput</title>
<meta name="description" content="HTML5 web page">
<meta name="keywords" content="HTML5">
<meta name="author" content="You">
<meta charset="UTF-8">
      <link href="jquery-ui.htm" rel="stylesheet" type="text/css">
      <script type="text/javascript" src="jquery-latest.htm"></script>
 <script name="saveMemory" type="text/javascript">
 $(document).ready(function() {
     $('#saveMemory').click(function() {
     //e.preventDefault();
       var content = $('#readDiv').html(); // orig
        //var content = document.getElementById('readDiv').value; // test
            $.ajax({
                  type: 'POST',
                  url: 'readInput.php',
                  data: {id: content}
                  //dataType: "html" // test
                  });
          });
     });
    </script>
    </head>
    <body onload="document.readWrite.writeInput.focus();"><!--form name.input name.focus!-->
    <div id="formContainer" style="display:block">
          <form name="readWrite" action="readInput.php" method="POST">
             <input name="memory" placeholder="...enter text here..." type="text">
             <input name="readMemory" id="readMemory" class="readMemory" placeholder="...read..." type="text">

           <input id="writeInput" name="writeInput" class="writeInput" placeholder="...write..." type="text">       
           <input class="saveMemory" id="saveMemory" name="saveMemory" value="...saveMemory..." type="submit">

          </form></div>
          <div name="readDiv" id="readDiv" class="readDiv">
          <div id="writeDiv" class="writeDiv" title="writeDiv">test text
          <div id="topDropbox" class="topDropbox" title="topDropbox">
    <img src="car.jpg">
    </div></div></div>
    </body></html>

readInput.php : readInput.php ：

     <?php
 $writeInput = $_POST['writeInput'];
 $data = $_POST['id'];

 $fileName = ("memories/$writeInput.html");
 $fileHandle = fopen($fileName, 'w+') or die("Cannot open file");
 fwrite($fileHandle, $data);
 fclose($fileHandle);
 echo($fileName);
 echo($data);
 ?>

It probably looks like a horrible hack job to you pros because I have tried so many bits of code, and I am sure I am just missing something silly, but I am at a loss...thank you anyone for any help! 对我的专业人员来说，这可能看起来像是一个骇人的骇客工作，因为我尝试了很多代码，而且我确定我只是想念一些愚蠢的东西，但我茫然不知所措……感谢任何人的帮助！

Answer 1

This update should do the trick: 此更新应该可以解决问题：

 $(document).ready(function() {
     $('#saveMemory').click(function(e) {
     e.preventDefault();
       var content = $('#readDiv').html(); // orig
        //var content = document.getElementById('readDiv').value; // test
            $.ajax({
                  type: 'POST',
                  url: 'readInput.php',
                  data: {id: content, writeInput : $('#writeInput').val()}
                  //dataType: "html" // test
                  }).done(
                        function( data ){
                            $('#result).html( data);
                        }
                  );
          });
     });

Changes: 变化：

Added e to the click function. 在点击功能中添加了e 。 It provides the function with a reference to the event object. 它为函数提供了对事件对象的引用。
Uncommented e.preventDefault() so the form won't execute breaking the ajax call. 无注释的e.preventDefault()因此该表单将不会执行以破坏ajax调用。
Added writeInput to the post data. 在发布数据中添加了writeInput 。
Added a callback ( .done ). 添加了回调（ .done ）。 When the request is finished this function will execute writing the responseData into writeDiv 请求完成后，此函数将执行将responseData写入writeDiv

Add the following div directly in the body tag. 将以下div直接添加到body标签中。

<div id="result" style="background-color: #f4f4f4;width:100%;height:300px;overflow: auto"></div>

如何使用AJAX / JQuery / PHP将DIV内容保存到HTML文件？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-01-18 22:10:55

如何使用AJAX / JQuery / PHP将DIV内容保存到HTML文件？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-01-18 22:10:55

解决方案1
0 已采纳 2015-01-18 22:10:55