如何利用ajax将servlet从数据库中取得的数

显示数据的jsp页面发送ajax请求servlet获取表格的html然后设置容器的innerHTML就行了

demo，居于jquery的，注意servlet需要将数组组合成table的html代码返回，而不是直接返回数组，ajax接受的数据只有xml和字符串2种

<script

type="text/javascript"

src="jquery.js"></script>

<script

type="text/javascript">

$(function

()

{

$.ajax({

url:

'xxxxxxxx.do',

//servlet的url，注意要组合成table的html然后返回就行了

cache:

false,

dateType:

'html',

success:

function

(data)

{

$('#dv').html(data)

},

error:

function

(xhr)

{

alert('servlet出错\n'+xhr.status+'\n'+xhr.responseText)

}

})

})

</script>

<div

id="dv"></div>

1.原生AJAX代码

get请求:

//创建xhr,IE低版本不支持

var xhr = new XMLHttpRequest()

//servlet地址

var url="/Website01/index.view"

xhr.open("get", url, true)

//xhr处理事件,异步

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 &&xhr.status == 200) {

//在这里进行相关处理,通过xhr.responseText获取后台反馈的文本

...

}

}

//xhr发送数据

xhr.send()

post请求:

post请求需注意要设置请求头（setRequestHeader）

xhr.setRequestHeader(“Content-type”, “application/json”)针对JSON数据

在xhr.send()中写需要发送的JSON数据，例如:

xhr.send(JSON.stringify(data))1

2.Servlet基础知识

Servlet是用Java编写的服务器端程序。其主要功能在于交互式地浏览和修改数据，生成动态Web内容。狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。

Servlet运行于支持Java的应用服务器中(Tomcat)。从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器。

在Java中，新建Servlet类继承自HttpServlet，重写doGet方法处理get请求，重写doPost方法，处理post请求，通过

PrintWriter out = response.getWriter()通过out.write()输出数据到前台的xhr.responseText，通过out.println()输出页面。

3.Servlet处理请求

处理请求通过HttpServletRequest类型，Get请求时查询字符串直接编码在请求链接中，格式为url+”?key1=value1&key2=value2”，通过getParameter(“key1”)来获取值。

4.前后端传递JSON数据

前端传递JSON给Servlet

//程序片段,请求头不能少

xhr.setRequestHeader("Content-type", "application/json")

var data={"name":"Tom","age":20}

xhr.send(JSON.stringify(data))1234

后端接受前端传递的JSON数据

//读取请求传递过来的JSON格式数据，返回JSON字符串

private String readJSONData(HttpServletRequest request) {

StringBuffer json=new StringBuffer()

String lineString=null

try {

BufferedReader reader=request.getReader()

while ((lineString=reader.readLine())!=null) {

json.append(lineString)

}

} catch (Exception e) {

System.out.println(e.toString())

}

return json.toString()

}

String json=readJSONData(request)

//将json字符串转为java对象

Gson gson=new Gson()

Person person=gson.fromJson(json, Person.class)

说明

Gson为google处理JSON格式数据的jar包，可将JSON字符串转换为对应的Java对象，也可将相应的Java对象序列化为JSON字符串。Person为定义的类，包含name和age字段。readJSONData函数将前端请求中的JSON数据转为java对象。

后端输出JSON到前端

//后端程序片段，传递json数据给前端

Person person=new Person("Tom",20)

Gson gson=new Gson()

String json=gson.toJson(person)

out.write(json)

//前端程序片段，通过ajax获取json数据

var xhr = new XMLHttpRequest()

var url="/Website01/index.view"

xhr.open("get", url, true)

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 &&xhr.status == 200) {

//获取后台传递过来的字符串并转换为json

var responseJson=JSON.parse(xhr.responseText)

var name=responseJson.name

var age=responseJson.age

}

}

xhr.send(null)

5.表单数据的处理

<form method="post" action="/Website01/index.view">

<label>Name:</label><input type="text" id="name1" name="name"><br>

<label>Age:</label><input type="number" id="age1" name="age"><br>

<input type="submit" id="submit" value="提交">

</form>12345

表单数据可以直接在form属性中定义请求方法和请求路径，在点击submit按钮后数据会直接提交并跳转。如上的表单，在点击按钮提交后，后台使用request.getParameter(“key”)获取数据，key值为input标签的name值，而非id值.，即通过以下代码获取表单提交的数据。

String name=request.getParameter("name")

String age=request.getParameter("age")12

以上。

---