ajax异步返回拼接html,样式失效问题

html-css043

ajax异步返回拼接html,样式失效问题,第1张

ajax异步请求数据,在前端用js拼接也好,在后端拼接整体当作字符串返回给前端也好,前端拿到数据传到html中时会发现,拼接的html的css已经失效。

然后发现样式失效之后,页面展示就这样了

后来才发现,在ajax回调中,需要再次调用一下jquery操作dom的方法,如图下图所示

经过重新渲染之后,页面很快就趋于平整啦。

完!

解决方法是关闭response的writer。

下面是ajax代码

$j.ajax({

type : "POST",

url : "/asi/jsonCarrier.jsp",

data : {"artistId":"${artistID}"},  //这里从session里拿出了artistID变量,用的是el表达式

datatype : "text",

timeout: 10000,

success : function(data) {

if (data!="" &&data!=null){

var dataArr = data

var jsonData = dataArr.statistics

var priceData = []

var volumeData = []

var summaryData = []

$j.each(jsonData, function(i, dataItem) {

priceData[i] = [ i, dataItem.beta ]

volumeData[i] = [ i, dataItem.volume ]

summaryData[i] = [ i, dataItem.volatility ]

})

$j("#artistName").html(dataArr.meta.artist_forename+" "+dataArr.meta.artist_surname)

displayGraph(jsonData, priceData, volumeData, summaryData)

}

},

error : function(XMLHttpRequest, textStatus, errorThrown){

alert(textStatus)

}

})

下面是 jsonCarrier.jsp里的java代码

<%

String artistId = request.getParameter("artistId")

String jsonData = DBSightXmlUtil.getXmlFromServer("http://aaa.com/json/asi-artist-"+ artistId + "-y.json")

response.setContentType("application/json")

response.getWriter().flush()

response.getWriter().write(jsonData)

response.getWriter().close()  //这里就是关键

%>

$(document).ready(function(){

$("#b01").click(function(){

htmlobj=$.ajax({url:"csdaizuo.com",async:false})

$("#myDiv").html(htmlobj.responseText)

})

})

像这样,页面在不加载的情况下就可以获取数据,这就是ajax,所以您不需要考虑页面重新加载的情况,