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

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可能根本不安全。

谢谢！ T.

- user1377911

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

- Barmar

---

请注意，即使标记为HTML5功能，它也可以在旧浏览器上正常工作。+1 - Mahn

这看起来很完美。我必须先在我工作的公司试用一下，因为有些用户只使用IE8，我必须确保它能正常工作。请问：任务ID在那里显示并且每个人都可以在代码中看到，这样可以吗？我相信每个黑客都会找出这个数字的含义，问题是他是否可以利用它做一些坏事。谢谢！ - user1377911

旧版浏览器只将这些视为自定义属性，它们会忽略它们。HTML5所做的就是保留以"data-"开头的名称给应用程序使用，以便您可以确信它们永远不会与标准属性冲突。我不确定对于黑客的担忧是什么——日期属性对应于日历日期，没有任何机密性。 - Barmar

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

- Kevin B

---

我还会将数据属性添加到锚点。 - Phil

请使用以下代码访问数值： var date = $(this).prop("data-date"); var task_id = $(this).prop("data-task"); - iAmClownShoe

@iAmClownShoe data-task 是一个属性，而不是一个属性。那段代码已经在另一个答案中涉及过了，我不觉得有必要重复它。 - Kevin B

Answer 3

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

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

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

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

- zxqx

Answer 4

在数据库中公开某个东西的实际ID只有在您的数据库不安全时才是不安全的。

如果id能够唯一识别某个物品，则对于我来说使用它似乎很好。如果您喜欢，使用data属性可以节省拆分逻辑的可能性，但仍然可以与id同时使用。

从惯例上看，与jQuery的许多代码相比，这是非常温和的代码。

- Grant Thomas

Answer 5

在编程中，将数据与元素关联的另一种优雅的方式是使用jQuery的data。不过，我建议编写一个jQuery插件，并为每个任务使用一个实例。插件封装了它需要的所有数据，因此您无需将其存储为与元素绑定的形式，这样做并不是很好。

- 0x6A75616E