<div> 中的 PHP $_GET 内容答案

【问题标题】：PHP $_GET content in <div><div> 中的 PHP $_GET 内容
【发布时间】：2016-02-28 06:13:31
【问题描述】：

首先我是新来的所以如果我做错了请告诉我^^"

我尝试使用 php $_POST 获取 div 元素的内容，但我真的不知道该怎么做。如果这很重要，我会使用 MVC 模式。我的 div 是可编辑的，并且答案框可以在页面上写一些东西。

<form action="index.php?page=addPost&topic_id={TOPIC_ID}" method="post">
     <div id="editor" name="editor">
        Lorem Ipsum...
     </div>
     <input type="submit" name="submit" value="senden" >
</form>

我不能只使用 textarea，但我想用类似

的东西来获取 div 元素之间的所有内容

$text = $_POST['editor'];

这可能吗？

【问题讨论】：

你需要AJAX方式-JQuery提交编辑器为$('editor').value
div 不是表单元素，因此您需要使用一些 javascript。你目前是否在使用任何 js 库（例如 jquery）？
或者只使用textarea 表单元素
如果出于某种原因你不能使用 textarea 元素：每当编辑 div 时，使用 javascript 将内容放入 <input type='hidden' name='editor'>
从现在开始我就没用过 Ajax 或 jquery ^^" 所以我不知道怎么用。但是谢谢你，看来我必须学习它。

标签： php

【解决方案1】：

使用 ajax 或仅使用 textarea 表单元素

<form id="data" method="post" enctype="multipart/form-data">
    <div id="editor" name="editor">
        Lorem Ipsum...
    </div>
    <input type="submit" name="submit" value="senden" >
    <input type="hidden" id="topicId" value="{TOPIC_ID}" >
</form>

<script>
    $(document).ready(function(){
    $("form#data").submit(function(){
        var formData = new FormData($(this)[0]);
        formData.append('editor', $('#editor').html());

        $.ajax({
            url: 'index.php?page=addPost&topic_id='+$('$topicId').val(),
            type: 'POST',
            data: formData,
            async: false,
            success: function (data) {
                     alert(data);
                     location.reload();
            },
            cache: false,
            contentType: false,
            processData: false
            });
            return false;
        });
    });
</script>

【讨论】：

【解决方案2】：

您可以使用隐藏的文本区域，并在表单提交时将 div 的内容添加到文本区域：

<form action="index.php?page=addPost&topic_id={TOPIC_ID}" method="post" onsubmit="getEditorContents(this);">
     <div id="editor">
        Lorem Ipsum...
     </div>
     <textarea style="display:none;" name="editor"><!-- --></textarea>
     <input type="submit" name="submit" value="senden" >
</form>

<script>
function getEditorContents(form){
    var html = document.getElementById("editor").innerHTML;
    form.editor.value = html;
    return true;
}
</script>

【讨论】：

【解决方案3】：

您可以按照以下方式继续：

<script>
    $(document).ready(function(){
        $("#myform").on("submit",function(e){
            e.preventDefault();  //Prevent default form submission
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    if (xmlhttp.responseText == "true") {
                        //success message
                    } else {
                        //error message
                    }
                }
            }
            xmlhttp.open("POST", "index.php", true);
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  //to maintain HTML format though you pass value through POST
            xmlhttp.send("page=addPost&topic_id="+$('#topicID').val()+"value=" + $('#editor').html());
        });
    });
</script>

对您的表单进行小幅返工：

<form id="myform" method="post">
     <div id="editor" name="editor">
        Lorem Ipsum... in WYSIWYG format
     </div>
     <input type="hidden" id="topicID" value="{TOPIC_ID}"/>
     <input type="submit" name="submit" value="senden" />
</form>

【讨论】：

如果您使用的是 jquery，为什么需要长手 ajax 请求？为什么不$.post($(this).attr('action'), {editor: $('#editor').html()}, function(){...});
我更喜欢这种方式，因为我个人感觉更好。顺便说一下，这种方式可以帮助初学者了解实际的处理过程是什么