在JQuery中单击时调用ColdFusion方法

Question

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

<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以使其删除文件。

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，以便它知道要删除的文件名，然后在收到成功的结果后通知用户警报。

我知道如何使用FORM进行上述操作，但是因为这不是表单，所以我有点困惑。就我的JQuery而言：

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

这只会<li>从DOM中删除。我还需要获取文件名并将其以某种方式传递给CFC。

Answer 1

您需要向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（）禁用点击

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

如果您不希望将文件路径放在href中，则可以始终将其放在数据属性中，或从同级链接中获取href。