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

Question

我正在努力让这段代码工作。我的意图是能够将 div 的内容保存到 html 文件中，以便以后调用它... 它部分起作用，因为如果我在 readInput.php 中将 $data=$_POST['id'] 更改为 $data=$_POST['memory']，它确实会将我在名为 'memory' 的输入中输入的任何文本保存到 html文件，并将使用我给它的任何名称正确保存文件。它失败的地方是如果我尝试获取 DIV 'readDiv' 的数据及其内容 $data=$_POST['id']; 它将保存一个空白的 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:

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

对于专业人士来说，这可能看起来像是一项可怕的 hack 工作，因为我已经尝试了很多代码，而且我确信我只是遗漏了一些愚蠢的东西，但我不知所措......谢谢任何人任何帮助！

Answer 1

此更新应该可以解决问题：

 $(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);
                        }
                  );
          });
     });

变化：

点击功能添加了e。它为函数提供了对事件对象的引用。
未注释 e.preventDefault() 因此表单不会执行中断 ajax 调用。
已将 writeInput 添加到 post 数据。
添加了回调 (.done)。请求完成后，此函数将执行将 responseData 写入 writeDiv

直接在正文标签中添加以下div。

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

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

How to save DIV content to HTML file using AJAX/JQuery/PHP?

html

php

ajax

jquery