我正在努力让这段代码工作。我的目的是能够将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);
?>
对于你们专业人士来说，这可能看起来像一个可怕的黑客工作，因为我尝试了很多代码，我确信我只是错过了一些愚蠢的东西，但我不知所措......谢谢任何人的任何帮助！
此更新应该可以解决问题：
$(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。
<div id="result" style="background-color: #f4f4f4;width:100%;height:300px;overflow: auto"></div>