一、HTML页面通过ajax发送http请求
前端有个普通的HTML页面,如下。
页面引入了jquery,页面有个表格
通过ajax发送请求
window.onload(function requestData(){
$.ajax({
url: "要访问的地址",
type: "post",
dataType: "json",
success: function(data){
/*这个方法里是ajax发送请求成功之后执行的代码*/
showData(data);//我们仅做数据展示
},
error: function(msg){
alert("ajax连接异常:"+msg);
}
});
});
后台的数据
@RequestMapping(value="/queryAllStudent")
public void query(HttpServletResponse resp) {
try {
/*list集合中存放的是好多student对象*/
List<Student> students = userService.getAllStudentInfo();
/*将list集合装换成json对象*/
JSONArray data = JSONArray.fromObject(students);
//接下来发送数据
/*设置编码,防止出现乱码问题*/
resp.setCharacterEncoding("utf-8");
/*得到输出流*/
PrintWriter respWritter = resp.getWriter();
/*将JSON格式的对象toString()后发送*/
respWritter.append(data.toString());
} catch (Exception e) {
e.printStackTrace();
}
}
public class student {
private int id;//id
private String name;//姓名
private String password;//密码
//省略get set方法。。。
}
前台展示数据(表格形式)
//展示数据
function showData(data) {
var str = "";//定义用于拼接的字符串
for (var i = 0; i < data.length; i++) {
//拼接表格的行和列
str = "<tr><td>" + data[i].name + "</td><td>" + data[i].password + "</td></tr>";
//追加到table中
$("#tab").append(str); }
}
流程
数据传送的流程
前台(html)发送ajax请求 --> 后台servlet中接受到请求,然后响应数据(来自数据库或其他) --> 前台(HTML)
ajax接受数据,处理数据(以表格显示).