無法使用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