Question

我试图编写一个通过ajax调用发布到自身的简单页面，并使用响应中的选定元素填充一些元素。它可以从表单之外的元素（#testDiv和#testDiv2）中提取，但它不适用于表单内的元素（＃testDiv3和#testDiv4）。我认为我没有正确选择它们，它们需要一些不同的语法，因为它们在表单中，即使它们不是输入，但我无法理解它进行。

这是页面：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ajax_same_2.php</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
    <script src="ajax_same_2.js"></script>
</head>
<body>
    <div id="testDiv"><p>random number: <?php echo rand(0,100); ?></p></div>
    <div id="testDiv2"><p>...</p></div>
    <form id="userform" action="ajax_same_2.php" method="post">
        <div id="testDiv3"><p>take ajax test data from here</p></div>
        <div id="testDiv4"><p>put ajax test data here</p></div>
        <input type="submit" name="userSubmit" value="Submit"/>
    </form>
</body>
</html>

这是脚本：

$(document).ready(function() {
    $('#userform').submit(function() {
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            dataType: "html",
            success: function(data) {
                var $response=$(data);
                var $test = $response.filter('#testDiv').html();
                $('#testDiv2').html($test);
                var $test2 = $response.filter('#testDiv3').html();
                $('#testDiv4').html($test2);
            }
        });
        return false;
    });
});

任何帮助将不胜感激！谢谢！

Answer 1

您需要使用.find，而不是.filter。 .filter只返回与选择器匹配的集合元素;在这种情况下，$(data)会返回返回的<body>中所有顶级元素的集合。 .find搜索元素的后代。

您应该做的是将所有内容包装在DIV中，然后使用.find：

success: function(data) {
    var $response = $('<div>', { html: data });
    var $test = $response.find('#testDiv').html();
    $('#testDiv2').html($test);
    var $test2 = $response.find('#testDiv3').html();
    $('#testDiv4').html($test2);
}

您需要DIV，因为.find与顶级元素本身不匹配，它只搜索后代。所以你要把所有东西都变成$response的后代。

Answer 2

或者您可以使用$(selector, context)表单：

success: function(data) {
    var $response = $(data);
    var $test = $('#testDiv', $response).html();   // here
    $('#testDiv2').html($test);
    var $test2 = $('#testDiv3', $response).html(); // and here
    $('#testDiv4').html($test2);
}

无法使用AJAX修改表单内的元素

2 个答案: