項目實戰中JS和Ajax進行前後端交換筆記

function getlist(e) {
			$.ajax({
				url : "/myo2o/shopadmin/getshoplist",
				type : "get",
				dataType : "json",
				success : function(data) {
					if (data.success) {
						handleList(data.shopList);
						handleUser(data.user);
					}
				}
			});
		}

jQuery.ajax(url,[settings]) :通過HTTP請求加載遠程數據，詳情請點擊此處！

url	(默認:當前頁面地址)發送請求的地址
type	(默認: “GET”) 請求方式 (“POST” 或 “GET”)， 默認爲 “GET”。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。
dataType	dataFilter 在請求成功之後調用。傳入返回的數據以及"dataType"參數的值。並且必須返回新的數據（可能是處理過的）傳遞給success回調函數
success	當請求之後調用。傳入返回後的數據，以及包含成功代碼的字符串。

---

function handleUser(data) {
			$('#user-name').text(data.name); // 給id爲user-name處添加值爲data.name 的文本
					}

text([val|fn])：取得所有匹配元素的內容。結果是由所有匹配元素包含的文本內容組合起來的文本。這個方法對HTML和XML文檔都有效。詳情請點擊此處！

val	用於設置元素內容的文本
function(index, text)	此函數返回一個字符串。接受兩個參數，index爲元素在集合中的索引位置，text爲原先的text值。

$('p').text();  // 無參數 描述:返回p元素的文本內容。
$("p").text("Hello world!");  // 參數val 描述:設置所有 p 元素的文本內容

---

function handleList(data) {
			var html = '';
			data.map(function (item, index) {
				html += '<div class="row row-shop"><div class="col-40">'+ item.shopName +'</div><div class="col-40">'+ shopStatus(item.enableStatus) +'</div><div class="col-20">'+ goShop(item.enableStatus, item.shopId) +'</div></div>'; 

			}); // 把data數據遍歷輸出
			$('.shop-wrap').html(html); // 設置元素shop-wrap 處的Html內容
		}

jQuery.map(arr|obj,callback)：詳情點擊此處！

html([val|fn]):
取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔。
在一個 HTML 文檔中, 我們可以使用 .html() 方法來獲取任意一個元素的內容。 如果選擇器匹配多於一個的元素，那麼只有第一個匹配元素的 HTML 內容會被獲取。
詳情點擊此處！

val	用於設定HTML內容的值
function(index, html)	此函數返回一個HTML字符串。接受兩個參數，index爲元素在集合中的索引位置，html爲原先的HTML值。

$(‘p’).html();	返回p元素的內容。
$(“p”).html(“Hello world!”);	設置所有 p 元素的內容

---

/**
*該方法表示從URL中獲取鍵爲name的值並轉換爲String形式
*/
function getQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if (r != null) {
		return decodeURIComponent(r[2]);
	}
	return '';
}

function getShopInitInfo() {
		$.getJSON(initUrl, function(data) {
			// alert("Hello World");
			if (data.success) {
				var tempHtml = '';
				var tempAreaHtml = '';
				data.shopCategoryList.map(function(item, index) {
					tempHtml += '<option data-id="' + item.shopCategoryId
							+ '">' + item.shopCategoryName + '</option>';
				});
				data.areaList.map(function(item, index) {
					tempAreaHtml += '<option data-id="' + item.areaId + '">'
							+ item.areaName + '</option>';
				});
				$('#shop-category').html(tempHtml);
				$('#area').html(tempAreaHtml);
			}
		});
	}

jQuery.getJSON(url, [data], [callback]):
通過 HTTP GET 請求載入 JSON 數據。
在 jQuery 1.2 中，您可以通過使用JSONP形式的回調函數來加載其他網域的JSON數據，如 “myurl?callback=?”。jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。 注意：此行以後的代碼將在這個回調函數執行前執行。
詳情點擊此處！

url	發送請求地址。
data	待發送 Key/value 參數。
callback	載入成功時回調函數。

---

$('#submit').click(function() {
		// alert(registerShpUrl);
		var shop = {};
		if (isEdit) {
			shop.shopId = shopId;
		}

		shop.shopName = $('#shop-name').val();
		shop.shopAddr = $('#shop-addr').val();
		shop.phone = $('#shop-phone').val();
		shop.shopDesc = $('#shop-desc').val();

		shop.shopCategory = {
			shopCategoryId : $('#shop-category').find('option').not(function() {
				return !this.selected;
			}).data('id')
		};
		shop.area = {
			areaId : $('#area').find('option').not(function() {
				return !this.selected;
			}).data('id')
		};

		var shopImg = $("#shop-img")[0].files[0];
		var formData = new FormData();
		formData.append('shopImg', shopImg);
		formData.append('shopStr', JSON.stringify(shop));
		var verifyCodeActual = $('#j_captcha').val();
		if (!verifyCodeActual) {
			$.toast('請輸入驗證碼！');
			return;
		}
		formData.append("verifyCodeActual", verifyCodeActual);
		$.ajax({
			url : (isEdit?editShopUrl:registerShpUrl),
			type : 'POST',
			// contentType: "application/x-www-form-urlencoded; charset=utf-8",
			data : formData,
			contentType : false,
			processData : false,
			cache : false,
			success : function(data) {
				if (data.success) {
					$.toast('提交成功！');
					/*
					 * if (isEdit){ $('#captcha_img').click(); } else{
					 * window.location.href="/shop/shoplist"; }
					 */
				} else {
					$.toast('提交失敗！');
					$('#captcha_img').click();
				}
			}
		});
	});

find(expr|obj|ele)：
搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

所有搜索都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器語法來寫。
詳情點擊此處！

expr	用於查找的表達式
jQuery object	一個用於匹配元素的jQuery對象
element	一個DOM元素

not(expr|ele|fn):從匹配元素的集合中刪除與指定表達式匹配的元素,詳情點擊此處！

data([key],[value])?*詳情點擊此處！