jQueryAjax：如何将大型HTML标记作为参数传递？

如何使用jQuery AJAX将大型HTML标记数据传递给我的PHP？当我收到结果时，它是错误的

jQuery AJAX代码：

$('#saveButton').click(function() {
        // do AJAX and store tree structure to a PHP array 
        //(to be saved later in database)
        var treeInnerHTML = $("#demo_1").html();
        alert(treeInnerHTML);
        var ajax_url = 'ajax_process.php';
        var params = 'tree_contents=' + treeInnerHTML;
        $.ajax({
            type: 'POST',
            url: ajax_url,
            data: params,
            success: function(data) {
                $("#show_tree").html(data);

            },
            error: function(req, status, error) { }
        });
});

<ul class="ltr">
   <li id="phtml_1" class="open">
       <a href="#"><ins>&nbsp;</ins>Root node 1</a>
       <ul>
           <li class="leaf" id="phtml_2">
             <a href="#"><ins>&nbsp;</ins>Child node 1</a>
           </li>
           <li class="last leaf" id="phtml_3">
             <a href="#"><ins>&nbsp;</ins>Child node 2</a>
           </li>
       </ul>
   </li>
   <li id="phtml_5" class="file last leaf">
       <a href="#"><ins>&nbsp;</ins>Root node 2</a>
   </li>
</ul>

<ul class="\&quot;ltr\&quot;">
   <li id="\&quot;phtml_1\&quot;" class="\&quot;open\&quot;">
       <a href="%5C%22#%5C%22"><ins></ins></a>
   </li>
</ul>

treeInnerHTML实际值：

$('#saveButton').click(function() {
        // do AJAX and store tree structure to a PHP array 
        //(to be saved later in database)
        var treeInnerHTML = $("#demo_1").html();
        alert(treeInnerHTML);
        var ajax_url = 'ajax_process.php';
        var params = 'tree_contents=' + treeInnerHTML;
        $.ajax({
            type: 'POST',
            url: ajax_url,
            data: params,
            success: function(data) {
                $("#show_tree").html(data);

            },
            error: function(req, status, error) { }
        });
});

<ul class="ltr">
   <li id="phtml_1" class="open">
       <a href="#"><ins>&nbsp;</ins>Root node 1</a>
       <ul>
           <li class="leaf" id="phtml_2">
             <a href="#"><ins>&nbsp;</ins>Child node 1</a>
           </li>
           <li class="last leaf" id="phtml_3">
             <a href="#"><ins>&nbsp;</ins>Child node 2</a>
           </li>
       </ul>
   </li>
   <li id="phtml_5" class="file last leaf">
       <a href="#"><ins>&nbsp;</ins>Root node 2</a>
   </li>
</ul>

<ul class="\&quot;ltr\&quot;">
   <li id="\&quot;phtml_1\&quot;" class="\&quot;open\&quot;">
       <a href="%5C%22#%5C%22"><ins></ins></a>
   </li>
</ul>

从我的显示树div返回的结果：

$('#saveButton').click(function() {
        // do AJAX and store tree structure to a PHP array 
        //(to be saved later in database)
        var treeInnerHTML = $("#demo_1").html();
        alert(treeInnerHTML);
        var ajax_url = 'ajax_process.php';
        var params = 'tree_contents=' + treeInnerHTML;
        $.ajax({
            type: 'POST',
            url: ajax_url,
            data: params,
            success: function(data) {
                $("#show_tree").html(data);

            },
            error: function(req, status, error) { }
        });
});

<ul class="ltr">
   <li id="phtml_1" class="open">
       <a href="#"><ins>&nbsp;</ins>Root node 1</a>
       <ul>
           <li class="leaf" id="phtml_2">
             <a href="#"><ins>&nbsp;</ins>Child node 1</a>
           </li>
           <li class="last leaf" id="phtml_3">
             <a href="#"><ins>&nbsp;</ins>Child node 2</a>
           </li>
       </ul>
   </li>
   <li id="phtml_5" class="file last leaf">
       <a href="#"><ins>&nbsp;</ins>Root node 2</a>
   </li>
</ul>

<ul class="\&quot;ltr\&quot;">
   <li id="\&quot;phtml_1\&quot;" class="\&quot;open\&quot;">
       <a href="%5C%22#%5C%22"><ins></ins></a>
   </li>
</ul>

查看将参数从字符串更改为对象是否有帮助：

var params = { tree_contents: treeInnerHTML };

看

---

TreeInnerHTML在第一个

&

标记处被切断（因为POST数据使用

var1=val&var2=val2&…

格式），生成的HTML的其余部分是浏览器自动关闭未关闭的标记

您传递的值没有URL编码，因此可能无法在服务器上正确解析该值。正如Salman A所说，您应该通过传递字典让jQuery为您解决这个问题：

var params = { tree_contents: treeInnerHTML };

---

查看if

var params={tree\u contents:treeInnerHTML}helpsHaha nice！：）难以置信的成功了。再次感谢萨尔曼爵士。我以前没有使用过那种JSON结构来传递AJAX。谢谢。我不知道jsfiffde.net。它在我的调试中将非常有用：）我不知道encodeURIComponent javascript函数。在AJAX或javascript中传递参数时，我将始终记住该函数。谢谢你提供的信息：）