Question

我对使用jQuery / JavaScript / Ajax时的最佳做法有疑问。让我们说我有一些任务，每个任务都有一个日历。用户可以单击任务日历中的某一天，并通过AJAX在特定日期预订任务。我必须在某处存储任务的日期和ID，我正在使用非常奇怪的ID，例如：

<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，但根本不可能保存。

谢谢！吨。

Answer 1

使用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
    });
});

Answer 2

~~正确的方法~~更好的方法是将数据存储在任一数据属性中，或者将span作为锚标记并存储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);
});

Answer 3

您可以使用自定义data attributes代替ID，如下所示：

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

然后你可以在jQuery中访问这样的值：

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

Answer 4

在数据库中公开某些内容的实际ID只是与数据库一样不安全。

如果它唯一地标识了某个东西，那么使用该元素的id似乎也很好。如果您愿意，可以使用data属性保存分裂逻辑，但您仍然可以串联使用id。

从传统上讲，与jQuery的大部分内容相比，这是非常温和的代码。

Answer 5

将数据与元素相关联的另一种更优雅的方法是使用jQuery's data。但是，我会考虑构建一个jQuery插件，并为每个任务使用它的一个实例。插件封装了它需要的所有数据，所以你不需要将它存储在元素上，这不是很好。

使用jQuery和AJAX调用的最佳实践

5 个答案: