jQuery按照ajax响应显示/隐藏Div,并将响应的requestId传递给成功Div

时间:2016-06-22 22:50:34

标签: javascript jquery html css ajax

根据服务电话的响应,我有以下代码显示/隐藏成功div,我需要将服务响应的请求传递给成功Div。如何通过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");
    }
});

2 个答案:

答案 0 :(得分:0)

首先,您要从错误的标记hide中删除span类,该标记没有该类。应该从父div中删除hide class,其中id =&#34; showResponseArea&#34;其中有hide类,其次你需要用{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); 
}

答案 1 :(得分:0)

当您收到回复消息时,您可以在html中使用它。您可以根据需要修改响应消息,因此请在您的javascript代码中使用.html()来操作您的响应消息。例如,您的回复可以是“&lt; strong&gt;成功,很棒,foo foo foo!&lt; strong&gt;”或“&lt; strong&gt;错误,foo foo foo!&lt; strong&gt;”。使用ajax请求作为显示响应的函数,在您的req页面中生成响应消息。

jsFiddle

HTML:

<div id="showResponseArea" class="alert alert-success">
    <span></span>
</div>

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