如何解析JQUERY 通过AJAX请求来的HTML数据

Javascript代码:

$.ajax({

url:'/htmltest',

type:'get',

dataType:'xml',

timeout:1000,

error:function() {

alert("request error!")

},

success:function(da

ta) {

alert(da

ta)

$(da

ta).find("div").each(function() {

var text = $(this).text()

alert(text)

})

}

})

Java代码:

protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {

httpServletResponse.setContentType("text/xmlcharset=utf-8")

httpServletResponse.setHeader("Cache-Control","no-cache")

PrintWriter out = httpServletResponse.getWriter()

out.println("<div>")

out.println("<p>test dom tree</p>")

out.println("</div>")

out.flush()

out.close()

}

在项目中遇到解析html，发现v-html并不满足复杂的渲染，就使用jq来处理

1.v-html 处理简单的标签

如：text="<p>vue转换</p>"

html中解析：

<p v-html="text">{{text}}</p>

2.返回标签中还有img、a标签，使用v-html就不会转换方法如下：

使用jquery处理:

1.在标签定义class

<div class="descript"></div>

2.安装jq

npm install jquery --save

3.在使用的地方引入

import $ from 'jquery'

async loadProductDetail(cData) {

const { data } = await getProductDetail(cData)

this.descript = data.data.sku //接口返回数据赋值

this.loadhtml() //调用方法

},

loadhtml() {

('.descript').html(this.descript) //赋值

const srcdescript = ('.descript').find('img') //找到当前所有的a标签、img标签

for (let i = 0i <srcdescript.lengthi++) { //遍历

let a = srcdescript.eq(i).attr('href') //找到a标签的href属性

let b = evals.eq(i).attr('src') //找到img标签的src属性

//this. url + a) //赋值

srcdescript.eq(i).attr('src', this.$url + b)//赋值

//如果接口返回有就不添加:

// srcdescript.eq(i).attr('href', a) //赋值

//srcdescript.eq(i).attr('src', b)//赋值

}

}

---