Question

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

我想要的是在编辑后添加和响应所有操作后存储整个DOM。但我无法通过ajax post请求发送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对象，以便在编辑时再次显示它。

Answer 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

Answer 2

您可以将DOM作为文本

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

然后发送，

但我建议使用其他方法，不保存整个DOM

通过ajax发送DOM

2 个答案: