通过ajax发送DOM答案

【问题标题】：send DOM through ajax通过ajax发送DOM
【发布时间】：2014-08-05 14:49:54
【问题描述】：

我创建了一个多步骤表单向导，用于在数据库上的多个模型上创建多条记录，它们都可以正常工作，并且所有记录都插入到数据库中。我的问题在于编辑我不想浪费我的时间再次重新加载 18 个模型表单/视图并将每个相关记录加载到正确的位置。

我想要的是在添加所有操作后存储整个 DOM，并在编辑时对其进行响应。但我无法通过 ajax 发布请求发送 DOM。

我试过了

$dom = $("html");
console.log($dom.context);
$data = {DomText : JSON.stringify($dom)};
$.ajax({
    url:"<?=ROOT_URL?>Reservations/domadd/<?php echo $NextId ?>",
    type: "POST",
    data:$data
});

它不工作给了我：

未捕获的 TypeError：将循环结构转换为 JSON

如果我不将它作为 json 发送

$dom = $(document);
console.log($dom);
$data = {DomText : $dom};
$.ajax({
    url:"<?=ROOT_URL?>Reservations/domadd/<?php echo $NextId ?>",
    type: "POST",
    data:$data
});

得到这个错误

Uncaught TypeError: Illegal invocation

我想要的只是存储 DOM 对象以在编辑时再次显示它。

【问题讨论】：

无法将 DOM 结构转换为 JSON

标签： javascript php jquery ajax dom

【解决方案1】：

您可以使用 outerHTML 将 html 代码作为字符串获取：

<html id="html">
    <body>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </body>
</html>

var $html = $('html')[0].outerHTML; // or $('html').prop('outerHTML')
var result = JSON.stringify($html);
alert(result);

编辑：在从输入中获取值遇到问题后，您可以切换输入类型以获取所需的值：

<html>
    <body>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <input type="text" value="first value (static)" />
        <input type="text" value="" />
        <input type="checkbox" />
    </body>
</html>


$('input[type="text"]').last()[0].value = 'second value (dynamic)';
$('input[type="checkbox"]').prop('checked', true);


$('input').each(function(){
    switch( $(this).attr('type') ){
        case 'text':
            $(this).attr('value', $(this).val());
            break;

        case 'checkbox':
            $(this).prop('checked') ? $(this).attr('checked', 'checked') : $(this).removeAttr('checked', '');
            break;

        //case 'radio'...
    }

});


var $html = $('html').clone();
var result = JSON.stringify($html.html());
alert(result);

这是一个想法。检查jsfiddle

【讨论】：

这不会得到输入值，这就是整个想法
现在我做了一个新技巧来重置值 attr 在发送 html 之前修复输入值 $('input , textarea').each(function(index) { $(this). attr('value', $(this).val()); });

【解决方案2】：

您可以将 DOM 作为文本获取

 var data = $("html").text();

然后发送，

但我建议使用另一种方法并不保存整个 DOM

【讨论】：

这实际上只是获取页面的文本内容，而不是 HTML 结构。