在JQuery中点击时调用ColdFusion方法 [英] Invoke ColdFusion method with on click in JQuery

问题描述

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

I have a page which displays a list of files that a user has uploaded. Its like this:

<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>

我有一个CFC，需要知道要删除哪个文件。因为这不是Form，所以我不知道如何将数据传递给CFC来删除文件。

I have a CFC with a method which needs to know which file to delete. Because this is not Form, I'm not sure how to pass the data to the CFC to get it to delete the file.

CFC示例：

<cffunction name="DeleteUpload" access="remote" returnformat="JSON">

<cfargument name="Filename" required="true"> //which filename to delete
<cffile action = "delete" file = "c:\files\upload\#Arguments.Filename#"> //delete the file

   <cfquery> // Update SQL table to remove filename reference
       DELETE FROM UploadsTable
       WHERE Filename = '#Arguments.Filename#'
    </cfquery>
<cfset success = true> // all done so set variable to true
<cfreturn success> // returns success as JSON to notify Jquery of deletion
</cffunction>

如何使用JQuery Ajax将Filename的值传递给CFC，以便知道哪个一个要删除，然后在收到成功的结果通知用户一个警报？

How can I use JQuery Ajax to pass the value of the Filename to the CFC so that it knows which one to delete and then after receiving the successful result inform the user with an alert?

我知道如何做一个FORM，但因为这不是一个形式我有点困惑。这是我的JQuery来的：

I know how to do the above with a FORM, but because this is not a form I'm a bit confused. This is as far as my JQuery has come:

$("#FileUploader").on('click', '.DeleteFileUpload', function () {
    $(this).parent('li').remove();
});

这只会删除< li> 从DOM。我还需要得到文件名并将其传递给CFC。

This only removes the <li> from the DOM. I also need to get the Filename and pass it to the CFC somehow.

推荐答案

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

You'll need to add an ajax call to the CFC:

$("#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（）禁用点击

You'd need to change the href of the delete link to the file path (as a reference) and disable the click by using preventDefault()

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

如果你不喜欢将文件路径放在href中，数据属性或从同级链接获取href。

If you don't like to put the file path in the href you could always put it in a data attribute or get the href from the sibling link.

这篇关于在JQuery中点击时调用ColdFusion方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！