记录ajax学习点滴

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。

转载于:https://my.oschina.net/jun24bryant/blog/785273