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

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 个解决方案

解决方案1
1 已采纳 2015-06-12 22:59:56

解决方案2
0 2015-06-12 23:04:12

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-06-12 22:59:56

解决方案2 0 2015-06-12 23:04:12

解决方案1
1 已采纳 2015-06-12 22:59:56

解决方案2
0 2015-06-12 23:04:12