6

我对使用 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，可能根本不保存。

谢谢！T。

4

5 回答 5

8

使用 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-26T22:31:50.360 回答
2

正确的方法更好的方法是将数据存储在数据属性中，或者将跨度设置为锚标记并将所需的参数字符串存储在 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-26T22:31:24.667 回答
1

您可以使用自定义数据属性代替 ID，如下所示：

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

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

$(".day_field").data("date");
于 2013-02-26T22:31:59.673 回答
0

暴露数据库中某些东西的实际 ID 与数据库一样不安全。

对我来说，使用idof 元素似乎也很好，如果它唯一地标识一个事物。如果您愿意，使用data属性可以节省拆分逻辑，但您仍然可以id串联使用。

按照惯例，与 jQuery 相比，这是非常温和的代码。

于 2013-02-26T22:31:25.740 回答
0

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

于 2013-02-26T22:32:34.553 回答