ajax-jQuery实现
一.Ajax
1. 标准请求响应时浏览器的动作(同步操作)
浏览器请求什么资源,跟随显示什么资源
2. ajax:异步请求.
局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内容.
3. ajax 由 javascript 推出的
由 jquery 对 js 中 ajax 代码进行的封装,达到使用方便的效果.
4. jquery 中 ajax 分类
1）第一层 $.ajax({ 属性名:值,属性名:值})
是 jquery 中功能最全的.代码写起来相对最麻烦的.
示例代码
/* url: 请求服务器地址 data:请求参数 dataType:服务器返回数据类型 error 请求出错执行的功能 success 请求成功执行的功能,function(data) data 服务器返回的数据. type:请求方式 */ $("a").click(function(){ $.ajax({ url:'demo', data:{"name":"张三"}, dataType:'html', error:function(){ alert("请求出错.") }, success:function(data){ alert("请求成功"+data) }, type:'POST' }); return false; })
2）第二层(简化$.ajax)
$.get(url,data,success,dataType))
$.post(url,data,success,dataType)
3）第三层(简化$.get())
$.getJSON(url,data,success). 相当于设置 $.get 中dataType=”json”
$.getScript(url,data,success) 相当于设置 $.get 中dataType=”script”
5. 如果服务器返回数据是从表中取出.为了方便客户端操作返回的数据,服务器端返回的数据设置成 json
1）客户端把 json 当作对象或数组操作.
6. json:数据格式.
1）JsonObject:json 对象,理解成 java 中对象
{“key”:value,”key”:value}
2）JsonArray:json 数组
[{“key”:value,”key”:value},{}]
7.代码示例
1）jsp中：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ /* url: 请求服务器地址 data:请求参数 dataType:服务器返回数据类型 error请求出错执行的功能 success请求成功执行的功能,function(data) data服务器返回的数据. type:请求方式 */ $("a").click(function(){ /* $.ajax({ url:'demo', data:{"name":"张三"}, dataType:'html', error:function(){ alert("请求出错.") }, success:function(data){ alert("请求成功"+data) }, type:'POST' }); */ $.post("demo",{"name":"张三"},function(data){ var result=""; for(var i =0 ;i<data.length;i++){ result+="<tr>"; result+="<td>"+data[i].id+"</td>" result+="<td>"+data[i].username+"</td>" result+="<td>"+data[i].password+"</td>" result+="</tr>"; } //相当innerHTML先清空后添加 $("#mytbody").html(result); }) return false; }) }); </script> </head> <body> <a href="demo">跳转</a> <table border="1"> <tr> <td>编号</td> <td>姓名</td> <td>密码</td> </tr> <tbody id="mytbody"></tbody> </table> </body> </html>
2）servlet中
@WebServlet("/demo")
public class DemoServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("执行控制器");
String name = req.getParameter("name");
Users users = new Users();
users.setId(1);
users.setPassword("123");
users.setUsername("张三");
Users users1 = new Users();
users1.setId(2);
users1.setPassword("22");
users1.setUsername("李四");
List<Users> list = new ArrayList<Users>();
list.add(users1);
list.add(users);
ObjectMapper mapper = new ObjectMapper();
String result = mapper.writeValueAsString(list);
resp.setContentType("application/json;charset=utf-8");
PrintWriter out = resp.getWriter();
out.println(result);
out.flush();
out.close();
}
}
