jquery ajax前后台交互的6种方式
前言：
前面学了基础的ajax感觉繁琐的真的就只想粘贴复制一键到位，本想着实现一个省市二级联动的功能，google了一下代码，真的是跟裹脚布一样又臭又长，就光那提取元素数据，创建元素，添加数据就看的烦人。
还好之前学过jquery，知道它是可以完美地封装javascript的操作，果然嘿真简单。
本来三十来行的创建ajax连接获取后台数据，就给我一行代码压缩，真的是越发展越简单。
我是直接看这个的：很好理解
链接：runoob
链接:jQuery中 .get、 . g e t 、 .post、 .getJSON、 . g e t J S O N 、 .ajax 方法详解
ajax - ajax() 方法
$.ajax实例
注意下：
GET可能得到的是缓存数据
POST每次都随着请求提交到后台，所以没有数据残留浏览器GET一般都是得到txt之类的文本数据，是单方面的
而POST是为了提交数据到后台进行交互操作，是双方面的
要使用Jquery首先得加载它：
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js">script>Jquery一般有四种方式的ajax：
第一种：load，从服务器加载数据，并把返回的数据放入被选元素中
<script type="text/javascript">
$(document).ready(function(){
$("#mybutton").click(function(){
$("#mydiv").load("haha.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success"){
alert("成功");
}
if(statusTxt=="error"){
alert("失败："+xhr.status+":"+xhr.statusTxt);
}
});
});
})
script>下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，
加载到指定的 <div> 元素中：
实例：
$("#div1").load("demo_test.txt #p1");第二种：GET方式：
$(document).ready(function(){
$("#mybutton").click(function(){
$.get("haha.txt",null,function(data,status){
alert(data+":"+status);
});
});
});
script>第三种：POST方式：
<script type="text/javascript">
$(document).ready(function() {
$("#mybutton").click(function() {
$.get("/Json/JsonServlet", {
name:"我是谁",
age:12
}, function(data, status) {
alert(data + ":" + status);
});
});
});
script>POST要和后台Servlet交互：
response.setCharacterEncoding("utf-8");
System.out.println(request.getParameter("name"));
System.out.println(request.getParameter("age"));
response.getWriter().println("你找到我了");后台输出：
我是谁
12要访问后台servlet也可以直接如此写地址：
$.get("JsonServlet", 第四种：getJSON方式：
<script type="text/javascript">
$(document).ready(function() {
$("#mybutton").click(function() {
$.getJSON("JsonServlet", {
name:"我是谁",
age:12
}, function(json) {
alert(json.name);
$("#mydiv").html(json.name);
});
});
});
script>返回的就直接是json格式的对象，无需JSON.parse的方法转换。
注意：不管是哪种方式后台都有两种方式和前台交互：
第一种后台交互：直接拼接字符串。
response.getWriter().
print("{\"name\":\"爱你\",\"age\":12}");第二种 传入JSON对象：
JSONObject jsonObject =
new JSONObject("{'name':'爱你','age':12}");
response.getWriter().print(jsonObject);相同的最终传递给前台的时候都默认以字符串的形式传递过去，
注意的是除了getJSON方式 前台可以使用两种方式来将字符串转换成js对象：
1. eval（）函数 ：不推荐，有隐患 会执行其他js操作
2. JSON.parse（）函数 ：推荐：只执行对象转换操作你们是不是还要问 不是有五种吗 为啥子前面就讲了四种？
没错 还有一种：
第五种：jQuery.ajax()：
执行异步 HTTP (Ajax) 请求
该方法是 jQuery 底层 AJAX 实现，所有的 jQuery AJAX 方法都使用 ajax() 方法。 。简单易用的高层实现见 .get, . g e t , .post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
可以这么理解：
前四种是高级方法，是对ajax（）进行了封装，更加简洁。可以理解为Jquery和JavaScript之间的关系。
$.ajax的一般格式
$.ajax({
type: 'POST',
url: url ,
data: data ,
success: success ,
dataType: dataType
});
$.ajax的参数描述
参数 描述
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType
可选。规定预期的服务器响应的数据类型。
默认执行智能判断（xml、json、script 或 html）。举例：
<script type="text/javascript">
$(document).ready(function() {
$("#mybutton").click(function() {
$.ajax({
url : "/Json/JsonServlet",
type : "POST",
async : true,
dataType : "json",
data : {
name : "前台数据",
age : 12
},
success : function(result) {
$("#mydiv").html(result.name);
},
error : function(xhr) {
alert("错误提示： " + xhr.status + " " + xhr.statusText);
}
});
});
});
script>后台：
request.setCharacterEncoding("utf-8");
System.out.println(request.getParameter("name"));
System.out.println(request.getParameter("age"));后台输出：
前台数据
12
注意：
data还可以用字符串拼接：一样的效果 多个参数中间要用&分割
data : "name=前台数据string&age=12",那什么时候使用呢？
$.post、$.get是一些简单的方法，
如果要处理复杂的逻辑，还是需要用到jQuery.ajax()
该方法通常用于其他方法不能完成的请求，比如网址错误。如果是表单提交的 可以参照我开头最后一个链接
·摘录别人的资料：·
三、区别
- GET - 从指定的资源请求数据，发送至服务器的key/value数据会作为QueryString附加到请求URL中,服务器返回数据的格式其实是字符串形式，并不是我们想要的json数据格式
- POST - 向指定的资源提交要处理的数据,这个函数跟 .get()参数差不多，多了一个type参数，type为返回的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和 . g e t ( ) 参 数 差 不 多 ， 多 了 一 个 t y p e 参 数 ， t y p e 为 返 回 的 数 据 类 型 ， 可 以 是 h t m l , x m l , j s o n 等 类 型 ， 如 果 我 们 设 置 这 个 参 数 为 ： j s o n ， 那 么 返 回 的 格 式 则 是 j s o n 格 式 的 ， 如 果 没 有 设 置 ， 就 和 .get()返回的格式一样，都是字符串的
- getJSON-使用 AJAX 请求来获得 JSON 数据,使用JSON相比传统的通过 GET、POST直接发送“裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的
ajax()函数的一个简化版本。这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成”myurl?callback=X”这种格式，让程序执行回调函数X。 - ajax()-$.ajax()
返回其创建的 XMLHttpRequest 对象
最后一种方式是依附于表单：表单的局部刷新
序列化表单方法：
serialize():将表单内容序列化成一个字符串。
serializeArray()：将表单内容序列化成一个对象数组
这里只介绍：serialize()
看script：
<script type="text/javascript">
$(document).ready(function() {
$("#mybutton").click(function() {
//var frm=$("#form1").serializeArray();
var frm = $("#form1");
$.ajax({
url : frm.attr("action"),
type : frm.attr("method"),
async : true,
data : frm.serialize(),
//var data=$("#form1").serializeArray();
success : function(data) {
alert("ok");
},
error : function(data) {
alert(data.status);
}
});
});
});
script>form表单：
注意：
使用：serialize()
这时表单的按钮的type不可以是submit，否则自提交数据，
也就是自动刷新； 用Ajax的serialize()提交表单，
如果input的type为submit，提交时就会自动刷新，
所以，用serialize()提交表单的时候最好把type改为button.