jquery ajax


使用jquery的ajax進行非同步資料傳輸，如果是使用javascript可以使用XMLHttpRequest函數去處理，由於jquery處理掉不少瀏覽器差異，使用上比較方便，加上碰過的專案大多為了特效都有使用，這邊只記錄自己比較熟的jquery部分。

ajax主要用途是用來處理不換頁更新顯示資料，延後載入部分資料增加使用者體驗，或是處理一些即時的資料紀錄去後台等等，只要頁面沒有刷新而可以變動的東西幾乎都是使用他來處理。

基本用法

這邊直接上範例。

var request = $.ajax({
  url: "page.html",//目標頁面
  method: "POST",//模式 post或get
  data: { id : menuId 
        , data : 'test'},//資料 用,分開
  dataType: "html" //取得頁面的資料類型，除了html以外json也很常用
});
//成功後執行
request.done(function( msg ) {
  $( "#log" ).html( msg );
});
//失敗的話執行
request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});

或是這樣寫

$.ajax({
    url: 'page.html',
    method: "POST",
    data: { id : menuId 
        , data : 'test'},
    dataType: "json",
    success: function (response) {
        //成功後執行
    },
    error: function (jqXHR, exception) {
        //失敗的話執行
    }
});

還有一些其他函數或設定可以使用，一般來說這些可以應付多數狀況。

送出整個form表單

一開始的時候還笨笨的每個欄位用id或name來抓，後來才知道有serializeArray這個函數能使用，所以紀錄一下。

var pdata = $('#repform').serializeArray();
//額外增加參數
pdata.push({name: "savemode", value: 'auto'});
$.ajax({
   type: "POST",
   url: 'page.html',
   data: $.param(pdata),
   dataType: "json",
   success: function(data){
   }
});

用FormData處理，可以處理含有檔案的表單

$("#upform").submit(function(e) {
	e.preventDefault();
	var formData = new FormData(this);
	
	$.ajax({
		url: $(this).attr("action"),
		type: 'POST',
		data: formData,
		dataType: "json",
		success: function (data) {
			alert(data)
		},
		cache: false,
		contentType: false,
		processData: false
	});
});

錯誤訊息顯示

純紀錄，參考https://stackoverflow.com/questions/6792878/jquery-ajax-error-function

$.ajax({
    url: 'page.html',
    success: function (response) {
    },
    error: function (jqXHR, exception, errorThrown) {
        var msg = '';
        if (jqXHR.status === 0) {
            msg = 'Not connect.\n Verify Network.';
        } else if (jqXHR.status == 404) {
            msg = 'Requested page not found. [404]';
        } else if (jqXHR.status == 500) {
            msg = 'Internal Server Error [500].';
        } else if (exception === 'parsererror') {
            msg = 'Requested JSON parse failed.';
        } else if (exception === 'timeout') {
            msg = 'Time out error.';
        } else if (exception === 'abort') {
            msg = 'Ajax request aborted.';
        } else {
            msg = 'Uncaught Error.\n' + jqXHR.responseText;
        }
        $('#post').html(msg);
        console.log(textStatus, errorThrown);
    },
});
Tags : javascript jquery