如何使用 Ajax 成功在新选项卡中打开 URL？

Posted 2023-03-05

【中文标题】如何使用 Ajax 成功在新选项卡中打开 URL？

【英文标题】：How To Open URL In New Tab Using Ajax Success?

【发布时间】：2019-03-18 21:49:24

【问题描述】：

在这里，我试图通过使用 Ajax Success 调用 Doctor 控制器的 ViewFile 操作在新选项卡中打开文件，该操作位于 functionabc(this) 中，单击锚标记。 现在的问题是一切都按要求进行，但 url 没有在新选项卡中打开。 下面是我的 Ajax

<script>
function abc(thisEvent) 
    debugger;
    var getDoCredId = $(thisEvent).attr('docCredId');
    var parameter =  id: getDoCredId ;
    $.ajax(
        url: "/Doctor/ViewFile1",
        type: "get",
        dataType: "html",
        data: parameter,
        success: function (data) 
            debugger;
            if (data = true) 
                debugger;
                var getdoctorId = $(thisEvent).attr('docCredId');
                var url = "/Doctor/ViewFile/" + getdoctorId;
                window.open(url, "_blank");
            
            else 
                debugger;
                showNotification("Error", "warning");
            
        
    );

下面是我的锚标记 HTML

<a title="View Attachment"   docCredId = "' + getDocCredId + '"  onclick="abc(this)"><i class="btn btn-web-tbl btn-warning fa fa-eye "></i></a>

下面是后面的代码

public bool ViewFile1(int id)
    
        var document = _doctorService.GetDoctorCredentialDetails(id);
        string AttachPath = ConfigPath.DoctorCredentialsAttachmentPath;
        string strFileFullPath = Path.Combine(AttachPath, document.AttachedFile);

        string contentType = MimeTypes.GetMimeType(strFileFullPath);
        bool checkFileInFolder = System.IO.File.Exists(strFileFullPath);
        if (checkFileInFolder == true)
        
            return true;
        
        else
        
            return false;
        
  
    public ActionResult ViewFile(int id)
    
        var document = _doctorService.GetDoctorCredentialDetails(id);
        string AttachPath = ConfigPath.DoctorCredentialsAttachmentPath;
        string strFileFullPath = Path.Combine(AttachPath, document.AttachedFile);
        string contentType = MimeTypes.GetMimeType(strFileFullPath);
        bool checkFileInFolder = System.IO.File.Exists(strFileFullPath);  
        bool filedata = System.IO.File.ReadAllBytes(strFileFullPath).Any();
        byte[] filedata1 = System.IO.File.ReadAllBytes(strFileFullPath);
        var cd = new System.Net.Mime.ContentDisposition
        
            FileName = document.FileName,
            Inline = true
        ;
        Request.HttpContext.Response.Headers.Add("Content-Disposition", cd.ToString());
        return File(filedata1, contentType);
    

【问题讨论】：

它在哪里打开？

@Nomaed ：它甚至没有打开任何有问题的地方

发送AJAX请求时是否调用了Doctor控制器的ViewFile1动作？

@Alexander ：是的，根据指定的条件，它返回 true 或 false，但问题是即使从 ViewFile1 返回 true 后，操作 url 甚至都没有打开

浏览器控制台有错误信息吗？尝试将console.log(data) 添加到成功处理程序。

【参考方案1】：

由于这对于常规评论来说太长了，因此我将其发布为答案，尽管它不能直接解决问题，因为我无法重现它，但可能会提供一些见解并让与此简化示例相比，您可以检查代码中发生的情况的差异。

---

从 jQuery ajax 成功回调调用 window.open() 工作正常：https://codepen.io/nomaed/pen/dgezRa

我使用了与您相同的模式，但没有使用您的服务器代码，而是使用 jsonplaceholder.typicode.com 示例 API。

---

您可能需要考虑代码示例的一些问题，即使您没有向 cmets 询问它并且它与您的问题没有直接关系（可能）：

if (data = true) 表示数据始终为真。如果您知道它是一个布尔值，您可能意味着执行 if (data === true)，或者如果您想接受任何真实值（true、、“某物”、42 等），则执行 if (data)。从 Java 代码以及您在 jQuery ajax 调用中定义响应格式的方式来看，您似乎期望“数据”变量结果是 HTML 而不是布尔值。您可能想尝试删除dataType: "html" 行并让jQuery 根据从服务器返回的内容设置数据格式，和/或发送JSON 格式的响应，如 result: true 的POJO 中的成功响应.然后确保data.result === true 确保你得到了你所期望的。

您可能应该将任意数据添加到标记 DOM 元素 data-* attributes，如果您使用的是 jQuery，请使用 .data() 选择器访问它们。 White 添加带有字符串值的随机属性可能会起作用，这被认为是对 HTML 和 DOM 的滥用，而 data-* 属性专门用于添加任何数据。

在abc() 函数中，您在开始时获取属性的值 (var getDoCredId = $(thisEvent).attr('docCredId');)，但在回调中您试图再次获取该值。你真的不需要它，因为 success() 回调是 abc() 函数范围内的一个闭包，并且它已经可以访问该值，因此确实不需要在回调中执行 var getdoctorId = $(thisEvent).attr('docCredId');。

我还建议将 getDoCredId 变量命名为 docCredId。有一个“get”前缀通常意味着它是一个 getter 函数或对某个 getter 的引用。同样，主函数的“thisEvent”参数可能应该被称为“callerElement”或类似的名称，因为它不是一个事件，它是一个实际元素，您在调用abc(this) 时直接从 DOM 传递在<a> 锚点的 onClick 事件处理程序中。这只是为了让任何正在阅读它的人更清楚地理解代码，以及当你在未来几个月回到它并试图弄清楚发生了什么时你自己:)

【讨论】：

因为看起来你不会得到一个被接受的答案，你至少应该为有帮助的建议点赞。

【参考方案2】：

尝试将async: false 添加到您的 Ajax 请求中

function abc(thisEvent) 
    debugger;
    var getDoCredId = $(thisEvent).attr('docCredId');
    var parameter =  id: getDoCredId ;
    $.ajax(
        async: false, // <<<----------- add this
        url: "/Doctor/ViewFile1",
        type: "get",
        dataType: "html",
        data: parameter,
        success: function (data) 
            debugger;
            if (data = true) 
                debugger;
                var getdoctorId = $(thisEvent).attr('docCredId');
                var url = "/Doctor/ViewFile/" + getdoctorId;
                window.open(url, "_blank");
            
            else 
                debugger;
                showNotification("Error", "warning");
            
        
    );