jquery ajax前后台交互的6种方式

前言：

前面学了基础的ajax感觉繁琐的真的就只想粘贴复制一键到位，本想着实现一个省市二级联动的功能，google了一下代码，真的是跟裹脚布一样又臭又长，就光那提取元素数据，创建元素，添加数据就看的烦人。
还好之前学过jquery，知道它是可以完美地封装javascript的操作，果然嘿真简单。
本来三十来行的创建ajax连接获取后台数据，就给我一行代码压缩，真的是越发展越简单。

我是直接看这个的：很好理解

链接：runoob

链接:jQuery中$.get、$.post、$.getJSON、$.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,$.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格式的，如果没有设置，就 和$.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表单：

    <form id="form1"
        action="${pageContext.request.contextPath}/ClassServlet" method="POST">
        <input type="text" name="name" /> <input type="password"
            name="password" /> <input type="button" id="mybutton" value="点我" />
    </form>

注意：
使用：serialize()

这时表单的按钮的type不可以是submit，否则自提交数据，  
也就是自动刷新； 用Ajax的serialize()提交表单，  
如果input的type为submit，提交时就会自动刷新，  
所以，用serialize()提交表单的时候最好把type改为button.