记录ajax学习点滴

原创
2016/11/09 20:30
阅读数 37

ajax是前端的一项jQuery技术,用于处理页面的局部刷新和异步请求提交。

一般有$.get $.post $.ajax 三种形式,其中$.get运用较少,它的提交请求是get形式。$.post是ajax高层次的体现,相对于$.ajax的底层实现,这两种方式使用的都比较广泛。

1.$.ajax

先来贴出$.ajax的代码的几种实现方法和不同用途:

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

此段代码用于加载一个js文件。

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

此段代码用于提交数据到后台并返回成功是弹出消息提示框。

最常用的$.ajax方法就是上面这一种。下面来看看$.post方式。

2.$.post

描述:

请求 test.php 网页,忽略返回值:

$.post("test.php");

描述:

请求 test.php 页面,并一起发送一些额外的数据(同时仍然忽略返回值):

$.post("test.php", { name: "John", time: "2pm" } );

描述:

向服务器传递数据数组(同时仍然忽略返回值):

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

描述:

使用 ajax 请求发送表单数据:

$.post("test.php", $("#testform").serialize());

描述:不带参数到后台

输出来自请求页面 test.php 的结果(HTML 或 XML,取决于所返回的内容):

$.post("test.php", function(data){
   alert("Data Loaded: " + data);
 });

描述:带参数到后台

向页面 test.php 发送数据,并输出结果(HTML 或 XML,取决于所返回的内容):

$.post("test.php", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

描述:

获得 test.php 页面返回的 json 格式的内容:

$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");

 

说了这么多,来总结下两者的区别。

 POST 请求较简单, $.ajax 则功能强大且复杂并且请求成功时可调用回调函数。

如果需要在出错时执行函数,请使用 $.ajax。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部