php - jQuery获取div内容并通过ajax发送到php脚本

Question

我正在尝试获取 div 的内容并将其发送到 ajax。

这是一个发送数据的ajax示例代码，但是如何将div的html内容放在这篇文章中并通过ajax将其发送到另一个php脚本？

我需要发送“可排序”用户界面中的所有 HTML，而不仅仅是文本。

<ul id="sortable">

<li class="ui-state-default">Hello, please send me to Ajax! :)</li>

</ul>


$("button").click(function()
  {
      $.post("get_sorted_content.php", // Example script
      {

       data: $("#sortable").html(); // My NEEDED content - Does not work!

     function(data)
       {

       alert("Data: " + data + ");
       });
 });

同样，这段代码可能缺少一些元素，但无论如何它都不起作用。这只是一个展示我正在尝试做的事情的例子。

Answer 1

我将在这里使用 AJAX 方法作为示例，因为我认为它更清楚地说明您想要做什么。让我们检索 li 内容并将其发送到您的 PHP 脚本。

不要绑定(bind)到 button 元素，该元素根本不是很具体，并且会绑定(bind)到页面上的任何按钮。相反，给它一个id并绑定(bind)到它。

您的主要问题是您获取的是 id sortable 的 ul 的 HTML，而不是您要获取的特定 li 元素之后。

<ul id="sortable">
    <li class="ui-state-default">Hello, please send me to Ajax! :)</li>
</ul>

<button id="clickme">Click me!</button>

// bind to the button with clickme ID
$("button#clickme").click(function() {
    $.ajax({
        url: 'get_sorted_content.php',
        type: 'POST', // GET is default
        data: {
            yourData: $('#sortable li').html()
            // in PHP, use $_POST['yourData']
        },
        success: function(msg) {
            alert('Data returned from PHP: ' + msg);
        },
        error: function(msg) {
            alert('AJAX request failed!' + msg);
        }
    });
});

现在，在 PHP 脚本中，您可以使用 $_POST['yourData'] 访问该数据:

<?php
// get_sorted_content.php
if(!empty($_POST['yourdata']))
    echo 'data received!';
else
    echo 'no data received!';
?>

编辑:在看到您的声明后:我需要发送“可排序”用户界面中的所有 HTML，而不仅仅是文本。，如果您需要 < strong>整个 ul 内容，使用您原来的内容:

data: {
    yourData: $('ul#sortable').html();
}