bdnq培训（一）3.25上课内容整理--ajax请求实现页面局部刷新

思路清晰版（这就是总结概括的艺术啊，原来一天就讲了这么点）：

1.js方式实现ajax

2.jquery方式实现ajax

（1）$.get

  (2)  $.post

  (3)  $.getJSON  区别于前两者在于 不需要eval函数转换

（4）$("#myul").load  优势在于，不需要再单独用标签渲染了，自动渲染。前三种都是手动渲染

里面的参数稍后写完再总结。

3.让渡的四种方式

4.ajax实现页面转发

顺便说下自己愚蠢的错误：The origin server did not find a current representation for the target resource or is not willing to disclose that one exists. 一直404.

后来发现是我tomcat服务器没加载我的项目

草泥马呀，我整整一下午宝贵时间因为jquery库是错误的，那些jquery代码全都没生效，servlet接收不到数据。。草泥马勒戈壁

快被气死了

深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

当我们用javascript写ajax程序写得很“开心”的时候，突然有人告诉你有一种东西叫jquery，它会告诉你不直接和HttpRequest是多么的快乐，同时你再也不需要再烦恼纠结的ajax乱码问题，更幸福的是你的js代码将大大地简化，看完本文，你会发现，ajax，简单的来讲就是一句话的事情。

本文重点是来讲讲jQuery中调用ajax的4种方法：$.get、$.post、$getJSON、$ajax。如果读者没有javascript和jquery的知识，或者没有ajax的概念，那么请先去问问google老大，再来读本文。

 

1、$.get

$.get()方法使用GET方式来进行异步请求，它的语法结构为：

$.get( url [, data] [, callback] )

解释一下这个函数的各个参数：

url：string类型，ajax请求的地址。

data：可选参数，object类型，发送至服务器的key/value数据会作为QueryString附加到请求URL中。

callback：可选参数，function类型，当ajax返回成功时自动调用该函数。

最后写一个$.get()的实例供大家参考：

 

1 2 3 4 5 6 7 8 9 10 11

$.get(      "submit.aspx" ,{          id:     '123' ,          name:   '青藤园' ,      }, function (data,state){          //这里显示从服务器返回的数据          alert(data);          //这里显示返回的状态          alert(state);      } )

2、$.post()

 

$.post()方法使用POST方式来进行异步请求，它的语法结构为：

$.post(url,[data],[callback],[type])

这个方法和$.get()用法差不多，唯独多了一个type参数，那么这里就只介绍type参数吧，其他的参考上面$.get()的。

type：type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式一样，都是字符串的。

最后写一个$.post()的实例供大家参考：

 

1 2 3 4 5 6 7 8 9 10 11 12

$.post(      "submit.aspx" ,{          id:     '123' ,          name:   '青藤园' ,      }, function (data,state){          //这里显示从服务器返回的数据          alert(data);          //这里显示返回的状态          alert(state);      },      "json" )

3、$.getJSON()

 

$.getJSON()是专门为ajax获取json数据而设置的，并且支持跨域调用，其语法的格式为：

getJSON(url,[data],[callback])

url：string类型， 发送请求地址  data ：可选参数， 待发送 Key/value 参数 ，同get，post类型的data callback ：可选参数，载入成功时回调函数，同get，post类型的callback

JSON是一种理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语言，并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送“裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的 ajax()函数的一个简化版本。这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成"myurl?callback=X"这种格式，让程序执行回调函数X。

4、$.ajax()

$.ajax()是jquery中通用的一个ajax封装，其语法的格式为：

$.ajax(options)

其中options是一个object类型，它指明了本次ajax调用的具体参数，这里我把最常用的几个参数附上

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$.ajax({          url: 'submit.aspx' ,          datatype: "json" ,          type: 'post' ,          success: function (e) {   //成功后回调              alert(e);          },          error: function (e){    //失败后回调              alert(e);          },          beforeSend: function (){  /发送请求前调用，可以放一些 "正在加载" 之类额话              alert( "正在加载" );          } })

好了，以上就是jquery实现ajax调用的几种方法，希望对大家有所帮助。

首先我先回顾下昨天讲了哪几个点：

昨天老师讲课的思路是，首先给你们演示用js实现的ajax，然后给你们演示jquery实现的ajax。

然后用ajax实现了动态分页，这个分页怎么把数据返回给客户端，用的是JSON格式，将对象JSON化，给客户端返回的是一个JSON字符串的数组。这里用JSONObject进行对象的序列化（对象只存在于java中，如果虚拟机关闭，怎么保证他还存在，这就是序列化），给了我们一个叫fastJSON的包，应该是阿里开发的，速度很快。

下午讲了几种方法，$.get()就是jquery实现的ajax，他等价于后者的get方式。

$.post()也一样，这里我们要熟练掌握的就是，它怎么写，每个参数什么意思。

然后通过$("#myspan").html（data），将请求的响应结果渲染到html某个标签中。

但是前面两种，你得到的都是json字符串，而不是json对象。这样的话你就要用eval函数进行转化，得到一个json对象。然后调用里面的，比如说一个集合。然后遍历到一个数组里，再用.html方法渲染到标签里。

getJSON和前面两种方法的唯一区别就是，不用eval函数转化成json对象了。

还有一个实现局部刷新的方法是load方法，但是它是选择器的方法。他的好处就是 $("#myul").load(....,....)，只要这个方法一执行，响应的数据就会直接渲染在myul标签里，巨方便。

还讲了一种带时间返回数据的方式，序列化里里面可以带很多枚举，代表的是对返回数据的一些输出方式的设定，比如null就不输出。

然后讲了个让渡，让渡就是解除jquery对$的占用，一共四种方式。这个稍后总结。

最后的最后，老师讲了怎么实现ajax的页面转发，这是完全可以做到的。