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

Question

我正在努力使此代碼正常工作。 我的意圖是能夠將div的內容保存到html文件中，以便以后再調用...它部分起作用，因為如果我將$data=$_POST['id']更改$data=$_POST['memory']在readInput.php它的確會將我輸入到名為“ memory”的輸入中的所有文本保存到html文件中，並將正確保存該文件名。 如果我嘗試獲取'readDiv' $data=$_POST['id'];及其內容$data=$_POST['id'];失敗了$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);
 ?>

對我的專業人員來說，這可能看起來像是一個駭人的駭客工作，因為我嘗試了很多代碼，而且我確定我只是想念一些愚蠢的東西，但我茫然不知所措……感謝任何人的幫助！

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 。
添加了回調（ .done ）。 請求完成后，此函數將執行將responseData寫入writeDiv

將以下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