jQuery和AJAX調用的最佳實踐

我有一個關於使用jQuery/JavaScript/Ajax的最佳實踐的問題。讓我說我有一些任務，每個任務都有一個日曆。用戶可以點擊任務日曆中的某一天，並通過AJAX在特定日期預訂任務。我有存儲日期和任務的ID在某處，我用真離奇的ID爲如：jQuery和AJAX調用的最佳實踐

<span class="day_field" id="date_13-02-2013_task_4">13.02.2013</span>

然後我就附加一個監聽器是這樣的：

$('.day_field').on('click',function(){ 
    var date = $(this).id.split('_')[1]; 
    var task_id = $(this).id.split('_')[3]; 
    //place for some validation 
    $.post('book_task.php',{task_id: task_id, date: date},function(data){ 
     //something cool with the result 
    }); 
});

我的問題是：這是如何做到這一點的正確方法？我不太確定，因爲ID可能很長+它包含數據庫中的ID，根本不可能保存。

謝謝！ T.

來源

2013-02-26 user1377911

使用HTML5數據屬性：

<span class="day_field" data-date="13-02-2013" data-task="4">13.02.2013</span> 

$('.day_field').on('click',function(){ 
    var date = $(this).data("date"); 
    var task_id = $(this).data("task"); 
    //place for some validation 
    $.post('book_task.php',{task_id: task_id, date: date},function(data){ 
     //something cool with the result 
    }); 
});

來源

2013-02-26 22:31:50 Barmar

+1注意即使它被標記爲html5功能，它將適用於舊的瀏覽器就好了。 – Mahn 2013-02-26 22:46:46

這看起來很完美。我必須在我工作的公司首先嚐試它，因爲有些用戶只使用IE8，我必須確保它能正常工作。請告訴我：可以在那裏顯示任務的ID，並且每個人都可以在代碼中看到它？我確信每個黑客都會發現這個數字的含義，問題是如果他能用它來做一些壞事。謝謝！ – user1377911 2013-02-26 23:09:02

舊版本的瀏覽器只將這些視爲自定義屬性，他們只是忽略它們。 HTML5所做的一切都是以'data-'開頭到應用程序的保留名稱，因此您可以確定它們永遠不會與標準屬性發生衝突。我不確定對黑客的擔憂是什麼 - 日期屬性對應於日曆日期，但沒有什麼祕密。 – Barmar 2013-02-27 15:36:11

~~正確的方法~~ 一個更好的辦法來做到這一點是將數據存儲在任一數據屬性，或使跨度錨標記和存儲在href屬性所需的帕拉姆字符串。

<span class="day_field" data-date="13-02-2013" data-task="4>13.02.2013</span> 

or 

<a class="day-field" href="?task_id=4&date=13-02-2013">13.02.2013</a>

與本作的錨標記：

$('.day_field').on('click',function(e){ 
    e.preventDefault(); 
    $.post("foo.php",this.href,handler); 
});

來源

2013-02-26 22:31:24

我也將數據屬性添加到錨點。 – Phil 2013-02-26 22:33:59

var date = $（this）.prop（「data-date」）; var task_id = $（this）.prop（「data-task」）; 訪問值 – iAmClownShoe 2013-02-26 22:37:44

@iAmClownShoe data-task是屬性，而不是屬性。該代碼已經在另一個答案中涵蓋，我不認爲有必要重複它 – 2013-02-26 22:38:47

暴露的數據庫中的一些實際ID只能作爲你的數據庫是不安全的。

使用元素的id對我來說也很好，如果它唯一標識一個東西。如果你願意，使用data屬性可以節省分割邏輯，但你仍然可以同時使用id。

傳統上講，這是非常溫順的代碼，與jQuery的大部分相比。

來源

2013-02-26 22:31:25

相反的ID，你可以使用自定義data attributes，像這樣：

<span class="day_field" data-date="date_13-02-2013_task_4">13.02.2013</span>

然後你就可以在jQuery的訪問是這樣的值：

$(".day_field").data("date");

來源

2013-02-26 22:31:59 zakangelle

將數據關聯到元素的一種更優雅方式是使用jQuery's data。不過，我會考慮構建一個jQuery插件，併爲每個任務使用它的一個實例。一個插件封裝了它需要的所有數據，所以你不需要將它存儲到元素中，這並不好。

來源

2013-02-26 22:32:34 SuitedSloth

jQuery和AJAX調用的最佳實踐

回答

相關問題