jQuery根据ajax响应显示/隐藏Div并将响应的requestId传递给成功Div [英] jQuery Show/Hide Div as per the ajax response and pass the response's requestId to the success Div

问题描述

根据服务调用的响应，我具有下面的show / hide success div的代码，另外我需要将服务响应的请求传递给Success Div 。如何传递 requestId 并显示成功 div ？

 < div id =showResponseAreaclass =alert alert-success hide> 
< span> 
< strong>成功!! < / strong>您的要求<< requestId>>已成功创建！ 
< / span> 
< / div> 
  

$。ajax（{
url：
类型：
data：
成功：function（resObj）{
$（＃showResponseArea span）。removeClass（hide）;
var requestId = resObj.requestId;
}
错误：funciton（resObj）{
alert（Some Error Occured）;
}
}） ;


解决方案

首先，您要移除隐藏从错误的TAG span 中没有该类的类。 hide类应该从具有hide类的id =showResponseArea的父div中移除，其次，您需要将<< requestId>> 包装进跨越一个ID。如

 < div id =showResponseAreaclass =alert hide> 
< span> 
< strong>成功!! < / strong>您的要求< span id =requestId> //请求ID转到此处< / span>已成功创建！ 
< / span> 
  

然后在ajax成功函数

 成功：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）; 
}，
错误：function（err，xhr，status）{
 $（＃showResponseArea）。removeClass（hide）; 
 $（＃showResponseArea）。removeClass（alert-success）; 
 $（＃showResponseArea）。addClass（alert-danger）; 
 // OR $（＃showResponseArea）。removeClass（hide）。show（）; 
 
 $（＃requestId）。text（xhr.responseText）; 
} 
  

I have the below code for show/hide success div as per the service call's response plus i need to pass the Service Response's request to the Success Div. How do i pass the requestId and show the success 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");
    }
});

解决方案

First of all you are removing the hide class from wrong TAG span which does not have that class. hide class should be removed from from the parent div with id="showResponseArea" which has the hide class, secondly You need to wrap the <<requestId>> in span with an id. like

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

Then in the ajax success function

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); 
}

这篇关于jQuery根据ajax响应显示/隐藏Div并将响应的requestId传递给成功Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！