jQuery获取整个html页面，包括表单输入 - 发送到php保存

Question

我正在尝试使用ajax来克隆整个html页面，其中表单数据填充在用户的输入中，然后使用php来保存整个页面，包含输入值。我能够克隆但不能发送这些数据。我怎样才能做到这一点？我可以发送html添加.html（）但我不能用这种方式用html发送数据。如果我只是克隆它，我得到表格中的数据......但我无法发送它。我在这张图片中遇到了jQuery的错误：

$( document ).ready(function() 
    {

 $('.ClickMe').click(function(event)
{
event.preventDefault();
var TheClone = $('.TheBody').clone();
console.log("Cloned");
//$('.TheBody').append(TheClone);

$.ajax({
type: 'POST',
url: "SaveForm.php",
data: {
    MyData: TheClone
},
success: function (data) {
    //
},
error: function (req, status, error) {}
});

这是我要保存的php，它可以工作，但数据不是从jQ​​uery到达那里的。

<?php
$Data = $_POST['MyData'];
file_put_contents('SavedForms/saved.php', $Data);

?>

Answer 1

如果要将jQuery对象作为字符串（html）发送到服务器，则应首先从该对象中提取HTML：

var TheClone = $('.TheBody').clone().html();

第二个（已经注释过），在PHP内你应该使用$_POST['MyData'];（键应该是字符串MyData而不是常量）。

Answer 2

问题已解决：

我通过在dom更改中将用户输入硬编码到html然后通过ajax发送html来实现它。我希望这个想法可以帮助别人。我能够很好地克隆html页面但我无法通过Ajax发送带有数据的克隆。我可以像上面提到的Dekel一样保存html，但这没有数据。

因此，当用户使用jQuery更改数据时，我将数据保存到html。我使用了输入和复选框。我为所有复选框提供了一个MyCheck类，所有文本都输入了一个MyInput类。这是我使用的代码。

$('.MyInput').on("change paste keyup", function() 
     {
    var MyVal = $(this).val();
    $(this).attr('value', MyVal);
    });

    $('.MyCheck').on("change paste keyup", function() 
     {
    if($(this).attr("checked"))
    $(this).removeAttr("checked");
    else
    $(this).attr('checked', 'checked');

    });


     $('.ClickMe').click(function(event)
    {
    event.preventDefault();

    var TheClone = $(".TheBody").html();

    $.ajax({
    type: 'POST',
    url: "SaveEnrollment.php",
    data: {
       MyData: TheClone
    },
    success: function (data) {
       window.location = "/thank-you";
    },
    error: function (req, status, error) {}
});