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

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

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

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

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

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

完!

1、后台程序生成json数据,不用拼接直接返回

2、ajax接收数据后,调用js解析json数据,可以利用jquery.parseJSON()方法解析

3、解析之后得到obj对象,然后可以直接obj.name这样获取对象属性

4、用html代码拼接

示例:

var obj = jQuery.parseJSON('{"name":"John","age":"20"}')

比如拼接为表格的tr

html = "<tr><td>" + obj.name + "</td><td>" + obj.age + "</td></tr>"

一般都是后台直接拼接好JSON格式返回,页面解析。

给你看个例子:

<%@ page language="java" contentType="text/htmlcharset=GB18030"

pageEncoding="GB18030"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=GB18030">

<title>四级联动下拉列表选中值保持不变</title>

<style type="text/css">

div #tip {

font:consolas normal 20px

color:blue

}

</style>

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script type="text/javascript">

$(function() {

$("#province").change(function() {

if ($("#province").val() == '0') {

$("#city").html('')

$("#county").html('')

$("#town").html('')

return

}

$("#tip").append("<span>请求Ajax获取城市...<br></span>")

$.get("ajax.do",

{type:'1',

value:$("#province").val(),

time:new Date()

},function(data) {

$("#tip").append("<span>"+$("#province").val()+"下城市信息获取成功<br></span>")

$("#city").html('<option value="0" selected="selected">请选择一个市</option>')

var pros = eval(data)

for (var i=0i<pros.lengthi++) {

var cityName = pros[i].name

var cityValue = pros[i].value

var opt = $("<option value='" + cityValue + "'>"+cityName+"</option>")

$("#city").append(opt)

}

})

})

$("#city").change(function() {

$("#tip").append("<span>请求Ajax获取县...<br></span>")

if ($("#city").val() == '0') {

$("#county").html('')

$("#town").html('')

return

}

$.get("ajax.do",

{type:'2',

value:$("#city").val(),

time:new Date()

},function(data) {

$("#tip").append("<span>"+$("#city").val()+"下县的信息获取成功<br></span>")

$("#county").html('<option value="0" selected="selected">请选择一个县</option>')

var pros = eval(data)

for (var i=0i<pros.lengthi++) {

var countyName = pros[i].name

var countyValue = pros[i].value

var opt = $("<option value='" + countyValue + "'>"+countyName+"</option>")

$("#county").append(opt)

}

})

})

$("#county").change(function() {

$("#tip").append("<span>请求Ajax获取镇...<br></span>")

if ($("#county").val() == '0') {

$("#town").html('')

return

}

$.get("ajax.do",

{type:'3',

value:$("#county").val(),

time:new Date()

},function(data) {

$("#tip").append("<span>"+$("#county").val()+"下镇的信息获取成功<br></span>")

$("#town").html('')

var pros = eval(data)

for (var i=0i<pros.lengthi++) {

var townName = pros[i].name

var townValue = pros[i].value

var opt = $("<option value='" + townValue + "'>"+townName+"</option>")

$("#town").append(opt)

}

})

})

})

</script>

</head>

<body>

省:<select id="province">

<option value="0" selected="selected">请选择一个省</option>

<option value="hubei">湖北</option>

</select>

市:<select id="city"></select>

县:<select id="county"></select>

镇:<select id="town"></select>

<div id="tip"></div>

</body>

</html>

package com.servlet.ajax

import java.io.IOExceptionimport java.io.PrintWriter

import javax.servlet.ServletException

import javax.servlet.annotation.WebServlet

import javax.servlet.http.HttpServlet

import javax.servlet.http.HttpServletRequest

import javax.servlet.http.HttpServletResponse

/**

* Servlet implementation class AjaxServlet

*/

@WebServlet("/ajax.do")

public class AjaxServlet extends HttpServlet {

private static final long serialVersionUID = 1L

/**

* Default constructor.

*/

public AjaxServlet() {

// TODO Auto-generated constructor stub

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

*/

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

this.doPost(request, response)

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

*/

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/htmlcharset=utf-8")

String type = request.getParameter("type")

String value = request.getParameter("value")

PrintWriter pw = response.getWriter()

System.out.println(type)

if ("1".equals(type) &&value != null &&!"".equals(value)) { // 根据省获取市

// 这里可以从数据库获取

if ("hubei".equals(value)) {

StringBuilder citys = new StringBuilder()

citys.append("[")

citys.append("{name:'武汉',value:'hubei001'},")

citys.append("{name:'襄阳',value:'hubei002'}")

citys.append("]")

System.out.println(citys.toString())

pw.print(citys.toString())

}

}

else if ("2".equals(type) &&value != null &&!"".equals(value)) { // 根据省获取县

// 这里可以从数据库获取

StringBuilder countries = new StringBuilder()

if ("hubei001".equals(value)) {

countries.append("[")

countries.append("{name:'AAA县',value:'wuhan001'},")

countries.append("{name:'BBB县',value:'wuhan002'},")

countries.append("{name:'CCC县',value:'wuhan003'}")

countries.append("]")

}

else if ("hubei002".equals(value)) {

countries.append("[")

countries.append("{name:'南漳县',value:'xiangyang001'},")

countries.append("{name:'古城县',value:'xiangyang002'}")

countries.append("]")

}

System.out.println(countries.toString())

pw.print(countries.toString())

}

else if ("3".equals(type) &&value != null &&!"".equals(value)) {

StringBuilder towns = new StringBuilder()

if ("wuhan001".equals(value)) {

towns.append("[")

towns.append("{name:'AAA镇',value:'wuhan001'},")

towns.append("{name:'BBB镇',value:'wuhan002'},")

towns.append("{name:'CCC镇',value:'wuhan003'}")

towns.append("]")

}

else if ("wuhan002".equals(value)) {

towns.append("[")

towns.append("{name:'CCC镇',value:'wuhan001'},")

towns.append("{name:'DDD镇',value:'wuhan002'},")

towns.append("{name:'EEE镇',value:'wuhan003'}")

towns.append("]")

}

else if ("wuhan003".equals(value)) {

towns.append("[")

towns.append("{name:'FFF镇',value:'wuhan001'},")

towns.append("{name:'GGG镇',value:'wuhan002'}")

towns.append("]")

}

else if ("xiangyang001".equals(value)) {

towns.append("[")

towns.append("{name:'WWW镇',value:'wuhan001'},")

towns.append("{name:'RRR镇',value:'wuhan002'}")

towns.append("]")

}

else if ("xiangyang002".equals(value)) {

towns.append("[")

towns.append("{name:'XXX镇',value:'wuhan001'},")

towns.append("{name:'YYY镇',value:'wuhan002'}")

towns.append("]")

}

System.out.println(towns.toString())

pw.print(towns.toString())

}

}

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6104498.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-14
下一篇 2023-03-14

发表评论

登录后才能评论

评论列表(0条)

保存