求一个jquery ajax请求servlet获取数据库数据，并显示在页面的例子

Question

求一个jsp jquery ajax请求servlet获取数据库数据，并显示在页面的例子，多谢

Answer 1

假设：
1、你的页面在Web-Root下，内容为： <div id="showMsg"></div><input type="text" id="userName" />，所用编码为utf-8
2、你的servlet为： HelloWorldServlet.java 映射路径为 servlet/helloWorldServlet
步骤：
1、引入jquery-1.6.4.min.js
2、编写id为userName的输入框的点击触发函数：
$("#userName").keyup(function(){
$.ajax({
type: "post",
url: "servlet/helloWorldServlet?userName="+$(this).val(),
dataType: "json",
success: function(data){
$("#showMsg").html(data.msg);//修改id为showMsg标签的html
}, error: function(){
alert("请求出错");
}
})
})
3、后台处理接收到的内容：
request.setCharactorEncoding("utf-8");
String userName = request.getParameter("userName");
response.setCharactorEncoding("utf-8");
PringWriter out = response.getWriter();
out.print("{\"msg\":\"你好~~"+userName+"!\"}");

注意事项：
1、这里的编码统一为utf-8
2、请求路径servlet/helloWorldServlet为相对路径，因此你的页面必须在项目的Web-Root下（也就是默认的web文件夹下，名字可能因项目配置不同而改变）
3、没了，记得给分哦，打字很辛苦的~

追问

如果我有多条数据呢？

追答

这个需要你自己去看json数据格式，以下是一个例子供你参考：
{"name":"Arthur","age":"18","result":[{"english":88,"math":"75","physics":"92"}],"other":"hahahah"}

那么，前台解析的话，要得到那个result数据，应该为：
success: function(data){
var result = data.result;
alert(result.english+" "+result.math+" "+result.physics)
})

同理，更多层，更复杂的，也是一样 x.xx.xxx.xxxx，用这种方式获取

追问

json格式明白，但是我在servlet返回的时候不是这样：out.print("{\"msg\":\"你好~~"+userName+"!\"}");
了吧，返回什么样的数据格式给ajax这边接收呢？

追答

这样就是json格式。。。。。。前面的格式指定了 dataType: "json"
那么，你就必须在后台out.print()一个json格式的数据，就像上面那样的
\" \" 是必不可少了，当然，对于复杂的json数据推荐你使用google的gson包
目前就一个例子的话，你就照着我上面说的做，\"\"用到你想吐了，就去下个gson