Question

我不认为我可以在标题中解释它。很难解释它。有一个区域有多种形式，我在那里使用序列化。当用户响应其中一个表单时，会出现一个输出并替换该表单。但是我希望它取代朋友列表div。

我需要为学校项目创建一个类似社交网络的Facebook。我在友谊请求页面上使用序列化，因为用户可能在该页面上有多个表单。这里的问题是，当用户提交其中一个表单时，它会接受响应并用相同的响应替换所有表单，我希望它替换所提交的表单。

我希望我能在这里更好地解释一下。

我的jquery代码

    $("[name='respond']").live('click', function() { 
        var RequestForm = $(this).closest('#REQUESTFORM');
        $("[name='action']").val($(this).val());
            $.ajax({
                type: "POST",
                data: RequestForm.serialize(),
                url: "index.asp?Process=RespondRequests", 
                success: function(output) { 
                    $(".friendlist").html(output);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $(".friendlist").html(output);
                }
            }); 
    });

例如

                        <div class="friendlist">

                            <a href="#"><img src="images/btn_icon_friendlist.jpg" alt="EfeTuncel" class="profile" /></a>
                            <div class="userinfo">
                                <span><strong><a href="#">Efe&nbsp;Tuncel</a></strong></span>
                                <span>Istanbul, Türkiye</span>
                            </div>
                            <div class="commonfriends">13 common friends</div>
                            <div class="tools">

                                <form method="post" action="content/requests/index.cs.asp?Process=RespondRequests" id="REQUESTFORM">
                                    <p>
                                        <input type="button" name="respond" value="Confirm" class="btn_confirm" />
                                        <input type="button" name="respond" value="Ignore" class="btn_ignore" />
                                    </p>
                                </form>                                  
                            </div>                        
                        </div>


                        <div class="friendlist">
                            <a href="#"><img src="images/btn_icon_friendlist.jpg" alt="talipkÃ¶sem" class="profile" /></a>
                            <div class="userinfo">
                                <span><strong><a href="#">talip&nbsp;kÃ¶sem</a></strong></span>
                                <span>Istanbul, Türkiye</span>
                            </div>
                            <div class="commonfriends">13 common friends</div>

                            <div class="tools">
                                <form method="post" action="content/requests/index.cs.asp?Process=RespondRequests" id="REQUESTFORM">
                                    <p>
                                        <input type="button" name="respond" value="Confirm" class="btn_confirm" />
                                        <input type="button" name="respond" value="Ignore" class="btn_ignore" />
                                    </p>

                                </form>                                  
                            </div>                        
                        </div>

Answer 1

问题在于您使用“friendlist”类定位每个元素：

$(".friendlist").html(output);

使用jQuery时，请始终注意DOM中的位置。单击按钮时，这是起点。首先，你想找到表格。您使用了遍历，但是当表单已有ID时，这不是必需的，因为这样您也可以直接定位它。

var RequestForm = $(this).closest('#REQUESTFORM');

与：

相同

var RequestForm = $('#REQUESTFORM');

确保只有一个 id带有“REQUESTFORM”。现在两个表单都有相同的ID，这是无效的; ID应始终是唯一的。但是如果它是REQUESTFORM_123怎么办？然后你需要知道它是“123”反对“456”或其他东西。因此，在这种情况下，由于不需要，因此更容易从表单中删除ID。只需使用遍历即可访问表单。

这基本上是您点击按钮时的位置：

div（friendlist）=＆gt; div（tools）=＆gt; form =＆gt; 按钮

那么如何定位所有这些元素呢？像这样：

var button = $(this);

你在这里：div（friendlist）=＆gt; div（tools）=＆gt; form =＆gt; 按钮

var form = $(this).parent();
  // or button.parent();

你在这里：div（friendlist）=＆gt; div（tools）=＆gt; 表格 =＆gt;按钮

var tools = $(this).parent().parent();
  // or $(this).parents('div.tools');

你在这里：div（friendlist）=＆gt; div（工具） =＆gt; form =＆gt;按钮

var friendlist = $(this).parent().parent().parent();
  // or $(this).parents('div.friendlist');

你在这里： div（朋友列表） =＆gt; div（tools）=＆gt; form =＆gt;按钮

你当时只是迈出了一步;只需查看HTML并查看您尝试访问的元素的位置，然后使用jQuery中最合适的traversing函数找到它。

在您的情况下，首先定义包含您正在使用的表单的div，例如：

var friend = $(this).parents('div.friendlist');

然后，当你的ajax帖子成功时，只需定位'friend'变量：

friend.html(output);

但是......如果唯一应该发生的事情是接受或忽略朋友请求，你不需要整个表单和序列化的东西，只需在按钮中包含你需要的数据，就像这样。

HTML：

<!-- a friend -->
<div class="friendlist" id="friend_123">
 info...

 <input type="button" name="confirm;123" value="Confirm" class="btn_confirm" />
 <input type="button" name="ignore;123" value="Ignore" class="btn_ignore" />
</div>

<!-- another friend -->
<div class="friendlist" id="friend_456">
 etc...
</div>

为每位朋友创建一个div并为其指定一个唯一的ID，因此很容易找到正确的ID。您也可以使用遍历，但在许多情况下，直接定位元素更容易。这样你就不必考虑它在DOM中的位置，在这种情况下，就是你点击的按钮。

jQuery的：

// when a button with one of these classes is clicked (or use live())
$('.btn_confirm, .btn_ignore').click(function() {
    // take the name attribute, e.g. "confirm;123" and split it on ";"
    var data = $(this).attr('name').split(';');
    // the first value, e.g. "confirm"
    var action = data[0];
    // the second value, e.g. "123"
    var userId = data[1];

// now post the data and process it in your script:
$.post('index.asp', {
    process: 'RespondRequests',
    action: action,
    userId: userId
}, function(result) {
    // target the parent div and replace the HTML
    // with the result from your script
    $('#friend_'+userId).html(result);
});


});

Answer 2

理想情况下，您要做的是为每个拥有该类朋友列表的div分配一个ID。

接下来，您必须以某种方式在Ajax请求中从服务器返回div的ID。然后，当请求返回时，只需通过ID隐藏正确的div。

另一种更简单的方法是在查询字符串中为每个表单添加另一个参数，这些表单将具有您必须在响应中隐藏的div的ID。

序列化的问题

2 个答案: