jQuery Show/Hide Div 根据 ajax 响应并将响应的 requestId 传递给成功 Div

Posted 2023-05-08

【中文标题】jQuery Show/Hide Div 根据 ajax 响应并将响应的 requestId 传递给成功 Div

【英文标题】：jQuery Show/Hide Div as per the ajax response and pass the response's requestId to the success Div

【发布时间】：2016-10-25 01:43:17

【问题描述】：

根据服务调用的响应，我有以下用于显示/隐藏成功 div 的代码，而且我需要将服务响应的请求传递给 SuccessDiv。我如何通过requestId 并显示成功div？

<div id="showResponseArea" class="alert alert-success hide">
    <span>
        <strong>Success !! </strong>Your request <<requestId>> has been successfuly created !!! 
    </span>
</div>

$.ajax(
    url:
    type:
    data:
    success: function(resObj)
        $("#showResponseArea span").removeClass("hide");
        var requestId = resObj.requestId;    
    
    error: funciton(resObj)
        alert("Some Error Occured");
    
);

【问题讨论】：

resObj 长什么样子？

fyi - 你的错误函数在这里是一个函数。

请注意，您正在从跨度中删除隐藏类，但实际上拥有它的是父 div

我也希望你的真实示例中有 URL、类型和数据参数。

【参考方案1】：

首先，您要从没有该类的错误标签span 中删除hide 类。隐藏类应从具有隐藏类的 id="showResponseArea" 的父 div 中删除，其次您需要使用 id 将<<requestId>> 包装在跨度中。喜欢

<div id="showResponseArea" class="alert hide">
<span>
    <strong>Success !! </strong>Your request <span id="requestId"> // Request id goes here</span> has been successfuly created !!! 
</span>

然后在ajax成功函数中

success: function(resObj)
    $("#showResponseArea").removeClass("hide");
    $("#showResponseArea").removeClass("alert-danger");
    $("#showResponseArea").addClass("alert-success");
    //OR $("#showResponseArea").removeClass("hide").show();

    var requestId = resObj.requestId;   
    $("#requestId").text(requestId ); 
,
error: function(err,xhr,status)
    $("#showResponseArea").removeClass("hide");
    $("#showResponseArea").removeClass("alert-success");
    $("#showResponseArea").addClass("alert-danger");
    //OR $("#showResponseArea").removeClass("hide").show();

    $("#requestId").text(xhr.responseText); 

【讨论】：

错误：funciton(xhr, status, error) $("#requestId").text(xhr.responseText);

$("showResponseArea).focus(); 我无法设置成功消息绘制的成功 div 的焦点。

为什么要关注 div ？我已经编辑了答案。

原因，我想要 div 焦点是我的页面太长，提交按钮在底部，最后是我的成功 div。因此用户必须手动导航才能到达成功 div。

$("#focus_point").attr("tabindex",-1).focus(); :focus "大纲：无！重要；"

【参考方案2】：

当您收到响应消息时，您可以在 html 中随意使用它。您可以根据需要修改响应消息，因此请在您的 javascript 代码中使用 .html() 来操作您的响应消息。例如，您的响应可以是“Success, great, foo foo foo!”或“Error, foo foo foo!”。使用 ajax 请求作为函数来显示响应，在您的请求页面中生成响应消息。

jsFiddle

HTML：

JS：

$.ajax(
    url:
    type:
    data:
    success: function(msg)
        $("#showResponseArea span").html(msg); //you will paste your response msg to the span
    
    error: funciton(msg)
        alert("Some Error Occured");
    
);