用ajax

Question

實現在DataGrid chanied過濾器/ SEACH選項Let's說我有某種形式的數據網格的，我想在這個網站添加幾個鏈接過濾器，如： http://www.yelp.com/search?find_desc=bar&ns=1&find_loc=Minneapolis%2C+MN （排序，距離，價格等） 。

每次用戶登錄過濾器鏈接時，都會相應地更新數據網格的內容。但我還需要更新其他過濾器中的鏈接以考慮更改。例如：如果我更改訂單字段，我需要在所有其他過濾器鏈接中添加/更新?order_field=x。

您認爲實施此類方案的最佳方法是什麼？ 我應該創建一個函數，當過濾器鏈接被點擊時，它更新所有其他過濾器的查詢字符串參數？或者使用隱藏字段在每個過濾器中記錄選定的選項？

如果可能的話，我想要一個可重用的解決方案。

Answer 1

由於數據是通過AJAX加載的，因此不應該有任何鏈接更新 - 至少在您的意思是錨定標記<a>時不應該有鏈接。您甚至不需要將過濾器存儲在隱藏字段中。

我會將所有過濾器存儲爲JSON對象。根據API的設置方式，您可能必須將JSON對象轉換爲API可用的對象，否則您甚至可以直接在$.ajax請求中傳遞JSON對象。

此示例代碼假定您在標記中有一個帶有id="price"的文本框。我故意將convert_filters_to_parameters留空，因爲您沒有提供有關您的API的任何詳細信息。 jQuery將會依次將這些參數序列化爲GET或POST請求，然後再發送出去。

var filters = { 
    distance:null, 
    price:null, 
    sortBy:'distance' 
} 

//this assumes you have a textbox with id="price" 
$('#price').changed(function() 
{ 
    filters.price = $(this).val(); 
    refresh_data(); 
}); 

function refresh_data() 
{ 
    var parameters = convert_filters_to_parameters(filters); 
    $.ajax('/my_api', 
      { 
       //i left out a lot of properties here for brevity 
       data: parameters, 
       success: function(response) { alert(response); } 
      }); 
}