jquery - 在 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 将文件名的值传递给 CFC，以便它知道要删除哪个文件，然后在收到成功结果后通过警报通知用户？

我知道如何使用表格执行上述操作，但因为这不是表格，所以我有点困惑。这是我的 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。