序列化問題

Question

我不認爲我可以在標題中解釋它。它很難解釋它。有一個地方有多種形式，我在那裏使用序列化。當用戶對其中一個表單做出響應時，輸出將會替換表單。但我希望它取代friendlist 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

理想情況下你會想要做的也是一個ID分配給每個有好友列表類的div的。

接下來，您必須在Ajax請求中以服務器的某種方式返回div的ID。然後，這只是在請求返回時通過ID隱藏正確的div的問題。

另一個更簡單的方法是在查詢字符串中爲每個表單添加另一個參數，這些表單的ID必須爲div，您必須在響應中隱藏該ID。

Answer 2

的問題是，你的目標每元素與類「好友列表」：

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

永遠知道你在哪裏在DOM使用jQuery的時候。當你點擊按鈕時，這是起點。首先你想找到表格。您使用遍歷，但當表單已有ID時這不是必需的，因爲那樣您也可以直接定位它。

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

將是一樣的：

var RequestForm = $('#REQUESTFORM');

只要確保只有一個id與 「REQUESTFORM」。現在這兩個表格都有相同的ID，這是無效的;一個ID應該始終是唯一的。但是，如果它是REQUESTFORM_123呢？然後你需要知道它與「456」或其他的「123」相反。因此，在這種情況下，從表單中刪除標識很容易，因爲它不是必需的。只需使用遍歷來獲得表單。

這基本上是你在哪裏，當你單擊該按鈕：

DIV（好友列表）=> DIV（工具）=>表格=>按鈕

所以你怎麼可以針對所有這些元素？像這樣：

var button = $(this);

您現在的位置：DIV（好友列表）=> DIV（工具）=>表格=>按鈕

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

您現在的位置：DIV（好友列表）=> DIV （工具）=>形式 =>按鈕

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

您現在的位置：DIV（好友列表）=>DIV（工具） =>表格=>按鈕

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

您現在的位置：DIV（好友列表） => DIV（工具）=>表格=>按鈕

只需上去一步一個腳印的時間;只需查看HTML並查看您嘗試訪問的元素的位置，然後使用jQuery中最合適的traversing函數找到它。

在你的情況下，首先定義一個包含你正在使用的形式，例如div：

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

然後，當你的Ajax發帖成功，只是針對「朋友」變量：

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，所以很容易的目標是正確的。您也可以使用遍歷，但在很多情況下，直接定位元素更方便。這樣，您不必考慮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); 
}); 
 

}）;