您的位置：首页 > Web前端 > JQuery

jquery实现Ajax请求的三种方式

2017-06-15 12:25 495 查看

jquery 对 ajax的请求进行了封装，可以使代码更简洁,也自动替我们解决了，浏览器问题。

jquery 提供了三种 ajax 请求的函数，分别为： $.ajax() , $.get() , $.post() ，下面是一个 jquery 实现ajax 请求的实例：

效果：页面加载完成时，自动发起ajax请求，从后台获取数据，并显示在页面表格中：

页面代码：

<body>
<table align="center" cellpadding="20" width="300" cellspacing="0" border="1" bordercolor="#a0c6e5">
<tbody id="tbBody"></tbody>
</table>
</body>

Ajax请求
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url : "AjaxJson", //请求url
type : "POST", //请求类型 post|get
// data : "key=value&key1=value2", //后台用 request.getParameter("key");
dataType : "json", //返回数据的类型 text|json|html--
success : function(users){ //回调函数和后台返回的数据
// var users = JSON.parse(data);
var tBody = $("#tbBody");
for(var i=0; i<users.length; i++){ //通过遍历，创建行数据
var tr = $("<tr><td>"+users[i].id+"</td><td>"+users[i].name+"</td><td>"+users[i].school+"</td></tr>")
tBody.append(tr);
}
}
});
});
// get 方式发送请求
// $.get(url,data,callback,type); data为发送的数据 {key:value}形式，
// callback成功时的回调函数 function(result){} result 后台返回的数据，
//type 返回的数据类型默认为 text ,可以设为 json text
//post 方式发送请求
// $.post(url,data,callback,type);

</script>

后台 servlet 代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setHeader("Content-Type", "text/html;charSet=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
User user1 = new User(1,"liuyj1","henu1");
User user2 = new User(2,"liuyj2","henu2");
User user3 = new User(3,"liuyj3","henu3");
List<User> users = new ArrayList<User>();
users.add(user1);
users.add(user2);
users.add(user3);
/* 使用 Gson 插件，将 java对象 转为 json 格式的字符串 导入 Gson 的jar包即可

Gson gson = new Gson();
String userStr= gson.toJson(users);*/

//使用 FastJson 插件，将 java对象 转为 json 格式的字符串 导入 FastJson 的jar包即可
String userStr = JSON.toJSONString(users);
out.println(userStr);
out.flush();
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}

效果：当访问这个页面时，自动获取后台数据，加载在页面表格中

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航