我正在使用带有 contenteditable="true" 的 div 作为输入字段，现在我正在寻找一种将 div 的内容传递给 PHP 变量的方法，以便能够将其保存在 .txt 文件中。我一直在四处寻找解决方案，到目前为止我发现的唯一建议是(据我所知)在提交之前将内容添加到隐藏的输入字段——尽管我不确定该怎么做，似乎有更好的方法来解决这个问题？
值得一提的是，我在后端方面的工作经验不多，因此非常感谢对解决方案的任何解释 - 即使此时只是指向正确方向的指针也会很好。
我目前有一个常规表单来测试带有变量 $name 的保存功能以用于发短信，但我的目标是将文本保存在 $textcontent< 中的 div 中 代替。 (我最好使用 href 而不是按钮来提交，但我怀疑这对使用哪种方法来解决我的问题有很大的影响。)
index.php
<?php
//temporary, will be dynamic
$sessionid = "123testID";
?>
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="results">
<div name="textcontent" contenteditable="true" class="no-formatting">Content that should be saved to .txt file…</div>
<!-- for testing only -->
<form action="index.php" method="post">
<input type="text" placeholder="Name" name="name">
<input type="submit" name="submit">
</form>
<br>
<a href="index.php">reload</a>
<!----->
</div>
</body>
</html>
<?php
$name = $_POST["name"];
$sessionid = "123testID";
?>
<?php
if (strlen($name) > 0) {
$fp = fopen('stories/'.$sessionid.'.txt', 'a+');
fwrite($fp, "textcontent:\t".$name."\r\n");
fclose($fp);
}
?>
最佳答案
现在我可以想到两种方法:如您所说，将文本从 contenteditable div 写入输入；并使用 ajax。
1.隐藏输入法
所以这里的工作流程是您将 contenteditable div 中的 html 复制到带有 javascript 的隐藏输入。当您单击提交按钮时，$_POST["my-hidden-input"] 将存储文本。
JS:
var contentText = document.getElementByClassName('no-formatting');
var hiddenInput = document.getElementById('hidden-input');
// copy the text to input when the user writes in contentText div
contentText.onkeyup = function() {
hiddenInput.innerHTML = this.innerHTML; // 'this' is pointing to contentText
}
将 HTML 添加到表单:
<input type="hidden" id="hidden-input" name="my-hidden-input">
<!-- note: your hidden input :) -->
添加PHP:
$textcontent = $_POST["my-hidden-input"];
注意:在我看来，这很愚蠢，因为您只需使用基本的非隐藏 type="text" 输入即可完成此操作。
2.AJAX方式
如果您不熟悉 ajax，那么这里的工作流程会有点复杂。如果是这样，用谷歌搜索(我没有给你链接，因为我是从 Javascript 中学到的:权威指南，第 6 版——一本非常好的书)
我们创建我们的 html，带有 contenteditable div(用于名称和文本内容)和提交按钮(实际上是一个 div，但这并不重要)。如果用户单击 div，它将通过 XMLHttpRequest (ajax) 将在这些 div 中写入的文本发送到您的 .php 文件。变量存储在 $_POST 中。
HTML 和 JS:
<!doctype html>
<html>
<head></head>
<body>
<div id="status"></div>
<div contenteditable="true" id="name"></div>
<div contenteditable="true" id="text"></div>
<div id="submit-button">Submit me</div>
<script>
function requestAjax(){
// Create our XMLHttpRequest object
var request = new XMLHttpRequest();
// the php file handling your file saving and other logic
var url = "my-php-file.php";
// variables later used in your php file
var name = document.getElementById("name").innerHTML;
var text = document.getElementById("text").innerHTML;
// needed in my-php-file.php. this is important becouse based on these parameters it will be stored in $_POST
var $POST = "name="+fn+"&text="+ln;
request.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200) {
var someCallback = request.responseText;
document.getElementById("status").innerHTML = someCallback;
}
}
// Send the data to PHP now... and wait for response to update the status div
request.send($POST); // Actually execute the request
// in case you want to inform the user if it succeeded or failed
document.getElementById("status").innerHTML = "still not finished";
}
var submitButton = document.getElementById('submit-button');
// attach event handler
submitButton.onclick = requestAjax;
</script>
</body>
</html>
PHP:
<?php
//retrieved through AJAX
$name = $_POST['name'];
$textcontent = $_POST['text'];
// insert your code here ...
echo 'Ajax request completed!'; //this will inform the request we've made that the proccesing is done
?>
基本上就是这样。现在在 php 文件中，您已将数据存储在变量中，这些数据是从 html 文件中检索到的:D
关于javascript - 获取div中的内容到PHP变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28141311/