$.get()和$.post()这两个方法,顾名思义,一个就是通过get方法来获取数据,另外一个通过post方法来获取数据。这两个方法在具体有什么区别呢?重点有三个方面的区别,第一个get传送的数据理论在2KB之内,post方法原则上是不受限制的。第二个方面,一个在地址栏上会显示当前的请求内容,这种在有用户名和密码的时候就不好了。另外一个是在请求体当中,这个虽然也不是很安全,但是至少要比GET方法要安全那么一点点了。第三个,其实get方法最初是用来设计请求静态内容的,而POST则是用来提交增删改数据的,只是后来的这个区分没那么明显而已了。
回头来说 $.get()和$.post这两个方法。这个两个方法都可以接受四个参数,第一个参数是告诉jQuery我要到什么地方去请求数据,第二个参数,是可选参数,是告诉jQuery我的请求数据是什么,这些请求数据会变成请求数据的一部分,主要是用于传递key/value的值到服务端进行处理。第三个参数是回调参数,回调参数只有在调用成功的时候才会调用。这里就有一个问题,如果回调不成功的话,应该怎么办?这时候就应该参考jQuery的全局方法中对于返回异常的处理了。最后一个参数,就是期望服务器传递回来的数据类型,这些数据类型包括但是不限于xml,html,json,script等等内容。尤其注意的是xml,xml这个东西其实和html是同源的,他们的老祖宗估计都是一个。所以,很多原本用于html的jquery方法,都是可以使用到xml上的,比如使用$()这个万能工厂,将返回的xml数据变成一个object对象,使用.find()来找到子元素,使用attr找到属性的值,使用.text()找到元素中的文本值。
还有一个要注意的是,前端写了期望后端发送的数据是xml,那么后端就应该按照前端的约定来发送数据:response.setContentType("text/xml;charset=UTF-8");
Server端的代码如下:
@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String name = req.getParameter("name"); String address = req.getParameter("address"); StringBuffer sb = new StringBuffer(); sb.append("<div><span>hi! nice to meet you! "); sb.append(name).append(",("); sb.append(address).append("),"); sb.append("how are you getting along?</span></div>"); StringBuffer xmlSb = new StringBuffer(); xmlSb.append("<book>") .append("<title>") .append("No ventured No gained") .append("</title>") .append("<publish>") .append("Chinses publish") .append("</publish>") .append("</book>"); //resp.setContentType("text/html;charset=utf-8"); resp.setContentType("text/xml;charset=utf-8"); resp.getWriter().print(xmlSb.toString()); }
前端的代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#getContentByAjax").click(function(){ //$.post("test",{name:"czz",address:"address"},callBack,"html"); //$.get("test",{name:"czz",address:"address"},callBack,"html"); $.get("test",{name:"czz",address:"address"},callBack,"xml"); }); function callBack(data,textStatus){ //$("#showText").html(data); var title=$(data).find("title").text(); var publish = $(data).find("publish").text(); $("#showText").text(title+" "+publish); } }); </script> </head> <body> <div id="showText"></div> <input type="button" id="getContentByAjax" value="sendAjax"> </body> </html>
jQuery_review之通过$.get()和$.post()方法来实现异步加载,布布扣,bubuko.com