在JQuery中单击调用ColdFusion方法

我有一个页面，显示用户上传的文件列表。它是这样的：

<ul id="FileUploader">
<li>
<a href="directory/filename1.pdf">Filename1</a> 
<a href="#" class="DeleteFileUpload">Delete</a>
</li>
<li>
<a href="directory/filename2.pdf">Filename2</a> 
<a href="#" class="DeleteFileUpload">Delete</a>
</li>
</ul>

---

这只会从DOM中删除

。我还需要获取文件名并以某种方式将其传递给CFC。

您需要向CFC添加一个ajax调用：

$("#FileUploader").on('click', '.DeleteFileUpload', function (event) {
    event.preventDefault();
    $(this).parent('li').remove();
    $.ajax('/path/to/your.cfc?method=DeleteUpload&Filename=' + $(this).attr('href'));
});

您需要将删除链接的href更改为文件路径（作为参考），并使用preventDefault（）禁用单击

如果您不想将文件路径放在href中，您可以始终将其放在数据属性中，或从兄弟链接获取href。

（参与stackoverflow的新成员，目前无法发表评论。）

不要只是去除元素然后祈祷。立即删除它，让它失败，然后显示一个“嘿，哇！”消息是令人尴尬和困惑的

取而代之的是，通过显示物品正在进入垃圾箱来满足即时反馈目标，然后在物品消失后将其杀死：

$("#FileUploader").on('click', '.DeleteFileUpload', function (event) {
  event.preventDefault();

  // Do something showing that we're trying a delete...
  $(this).text('Deleting...')  

  var uri = '/path/to/your.cfc?method=DeleteUpload&Filename=' + encodeURI(     $(this).attr('href')) )

  $.ajax(uri)
    .done( function() {
      $(this).parent('li').remove();
    })
    .fail( function() {
      // Let them know we have a goof and let them try again
      alert('Whoa! That couldn't be deleted!')
      $(this).text('Deleted...')  
    })    
});

---

您想考虑防止用户通过UN/RE绑定处理程序两次。

记住CordDFIX是在服务器上执行的，JS是在浏览器中执行的（至少在这种情况下是这样）。因此，您应该创建一个可以发布或获取信息的COLDFLASH方法。然后你就可以用Ajax在JavaScript中调用它了。是的，我明白。我只想将文件名的值传递给CFC。我想我需要使用$.ajax“Get”，但不确定。如果您提交要处理的数据，那么您可能应该使用$.post，即使页面上没有表单？可以吗？可以。。。基本上，您将使用JS提交表单值，并且您的Coldfusion方法将处理提交的表单。尽管如此，@Jelle Kralt给出的解决方案看起来也能奏效。请注意，从技术上讲，在提交修改服务器中某些内容的数据（如本例中的文件名）时，应该使用POST。如果POST用于更改，GET仅用于检索信息，那么它将保持RESTful状态。我建议在您成功从服务器返回消息之前，不要删除

li

——您可以通过向

$.ajax（）

调用添加回调来实现这一点。如果您首先从页面中删除

li

，如果服务器上出现问题，UI将无法正确反映数据的当前状态。我不是一个在代码方面使用百分比的人。该问题不一定是与CF相关的问题。可能是连接问题。无论采用哪种方式，如果在元素实际被删除之前就将其从UI中删除，则会增加用户混淆的风险。而且，您应该始终担心HTTP请求是否正确运行。总是。而且..我更喜欢正确的现实而不是速度的幻觉。正如斯科特所说。。只有在实际发生删除操作时才删除li。此外，您还需要在ajax调用和cfc周围进行一些严格的安全保护。写一些可以找到并删除所有文件和数据的东西是相当简单的。仔细想想，我认为有一个更好的方法，它结合了你对“速度错觉”的渴望和我对“正确的现实”的渴望。单击按钮时，不要从DOM中删除元素，只需将其隐藏即可。当服务器响应返回“success”时，将其删除。如果服务器响应返回的不是“成功”，请再次显示它，并附带一条解释发生了什么的好消息。

$("#FileUploader").on('click', '.DeleteFileUpload', function (event) {
    event.preventDefault();
    $(this).parent('li').remove();
    $.ajax('/path/to/your.cfc?method=DeleteUpload&Filename=' + $(this).attr('href'));
});

<a href="directory/filename2.pdf" class="DeleteFileUpload">Delete</a>

$("#FileUploader").on('click', '.DeleteFileUpload', function (event) {
  event.preventDefault();

  // Do something showing that we're trying a delete...
  $(this).text('Deleting...')  

  var uri = '/path/to/your.cfc?method=DeleteUpload&Filename=' + encodeURI(     $(this).attr('href')) )

  $.ajax(uri)
    .done( function() {
      $(this).parent('li').remove();
    })
    .fail( function() {
      // Let them know we have a goof and let them try again
      alert('Whoa! That couldn't be deleted!')
      $(this).text('Deleted...')  
    })    
});