项目实战中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])?*详情点击此处！