返回 导航

HTML5 / CSS3

hangge.com

Framework7 - DOM7库的使用3（Ajax、Get、Post数据请求）

作者：hangge | 2016-08-11 08:37

1，Ajax请求
发送 Ajax 请求的代码格式如下： 
$$.ajax(parameters)
方法里参数可选值如下：
Parameter Type Default Description
async boolean true If you need synchronous requests, set this option to false
method string 'GET' Request method (e.g. "POST", "GET", "PUT")
cache boolean true If set to false, it will force requested pages not to be cached by the browser. Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_nocache={timestamp}" to the GET parameters
contentType string 'application/x-www-form-urlencoded' Content type. Also could be 'multipart/form-data' and 'text/plain'. For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server
crossDomain boolean undefined If you wish to force a crossDomain request (such as JSONP) on the same domain, set the value of crossDomain to true. When true additional "X-Requested-With: XMLHttpRequest" header will be added to request
data Object or String or Array Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. For POST requests could be FormData type
processData boolean true By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false
dataType string 'text' The type of data that you're expecting back from the server. Could be 'text' or 'json'
headers object An object of additional header key/value pairs to send along with requests using the XMLHttpRequest transport
xhrFields object An object of fieldName-fieldValue pairs to set on the native XHR object
username string A username to be used with XMLHttpRequest in response to an HTTP access authentication request
password string A password to be used with XMLHttpRequest in response to an HTTP access authentication request
timeout number 0 Set a timeout (in milliseconds) for the request
Callbacks
beforeSend function (xhr) A pre-request callback function that can be used to modify the XHR object before it is sent. Use this to set custom headers, etc
error function (xhr, status) A function to be called if the request fails
success function (data, status, xhr) A function to be called if the request succeeds
complete function (xhr, status) A function to be called when the request finishes (after success and error callbacks are executed)
statusCode object An object of numeric HTTP codes and functions to be called when the response has the corresponding code. For example, the following will alert when the response status is a 404: 
$$.ajax({
  url: 'somepage.html',
  statusCode: {
    404: function (xhr) {
      alert('page not found');
    }
  }
})


2，Ajax事件拦截
任何 Ajax 请求都会产生全局的 Ajax Events。我们可以对其进行拦截并进行相应的处理。具体的事件如下：
Event Target Description
ajaxStart document A pre-request event that can be used to modify the XHR object before it is sent. Use this to set custom headers
ajaxError document Event to be triggered if the request fails
ajaxSuccess document Event to be triggered if the request succeeds
ajaxComplete document Event to be triggered when the request finishes (after success and error events are executed)
使用样例： 
$$(document).on('ajaxComplete', function (e) {
  var xhr = e.detail.xhr;
  console.log('request performed');
});

3，Get请求
虽然 Ajax 方法功能强大。但通常在项目中我们会更经常使用 Get 或 Post 方法，毕竟用起来方便很多。
Dom7.get 方法样例如下： 
$$.get('blog-post.php', {foo:'bar', id:5}, function (data) {
  $$('.articles').html(data);
  console.log('Load was performed');
});

4，Post请求
Dom7.post 方法样例如下： 
$$.post('auth.php', {username:'foo', password: 'bar'}, function (data) {
  $$('.login').html(data);
  console.log('Load was performed');
});

5，异步获取JSON数据
使用 Dom7.getJSON 我们可以通过 ajax 的方式获取服务器上的 json 数据，并自动转换成对象。使用样例如下： 
$$.getJSON('items.json', function (data) {
  console.log(data);
});
评论

全部评论（0）

回到顶部