项目实战中JS和Ajax进行前后端交换笔记

- 日理万妓 2022-02-16 02:19 128阅读 0赞

### SSM项目实战中JS和Ajax进行前后端交互笔记 ###

jQuery.ajax(url,\[settings\]) :通过HTTP请求加载远程数据，**详情请点击**[**此处**][Link 1]**！**

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>(默认:当前页面地址)发送请求的地址</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>(默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。</td> 
  </tr> 
  <tr> 
   <td>dataType</td> 
   <td>dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

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

text(\[val|fn\])：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。**详情请点击**[**此处**][Link 2]**！**

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>val</td> 
   <td>用于设置元素内容的文本</td> 
  </tr> 
  <tr> 
   <td>function(index, text)</td> 
   <td>此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。</td> 
  </tr> 
 </tbody> 
</table>

$('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)**：**详情点击**[**此处**][Link 3]**！**

**html(\[val|fn\]):**  
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。  
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。  
**详情点击**[**此处**][Link 4]**！**

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>val</td> 
   <td>用于设定HTML内容的值</td> 
  </tr> 
  <tr> 
   <td>function(index, html)</td> 
   <td>此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(‘p’).html();</td> 
   <td>返回p元素的内容。</td> 
  </tr> 
  <tr> 
   <td>$(“p”).html(“Hello <b>world</b>!”);</td> 
   <td>设置所有 p 元素的内容</td> 
  </tr> 
 </tbody> 
</table>

--------------------

/**
    *该方法表示从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 '';
    }

**jQuery.getJSON(url, \[data\], \[callback\]):**  
通过 HTTP GET 请求载入 JSON 数据。  
在 jQuery 1.2 中，您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据，如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 注意：此行以后的代码将在这个回调函数执行前执行。  
**详情点击**[**此处**][Link 5]**！**

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>发送请求地址。</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>待发送 Key/value 参数。</td> 
  </tr> 
  <tr> 
   <td>callback</td> 
   <td>载入成功时回调函数。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

$('#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的选择器语法来写。  
**详情点击**[**此处**][Link 6]**！**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDYxNDIx_size_16_color_FFFFFF_t_70]

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>expr</td> 
   <td>用于查找的表达式</td> 
  </tr> 
  <tr> 
   <td>jQuery object</td> 
   <td>一个用于匹配元素的jQuery对象</td> 
  </tr> 
  <tr> 
   <td>element</td> 
   <td>一个DOM元素</td> 
  </tr> 
 </tbody> 
</table>

not(expr|ele|fn):从匹配元素的集合中删除与指定表达式匹配的元素,**详情点击**[**此处**][Link 7]**！**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDYxNDIx_size_16_color_FFFFFF_t_70 1]  
**data(\[key\],\[value\])?\*详情点击[此处][Link 8]**！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDYxNDIx_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDYxNDIx_size_16_color_FFFFFF_t_70 3]

[Link 1]: http://jquery.cuishifeng.cn/jQuery.Ajax.html
[Link 2]: http://jquery.cuishifeng.cn/text.html
[Link 3]: http://jquery.cuishifeng.cn/jQuery.map.html
[Link 4]: http://http://jquery.cuishifeng.cn/html.html
[Link 5]: http://http://jquery.cuishifeng.cn/jQuery.getJSON.html
[Link 6]: http://jquery.cuishifeng.cn/find.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDYxNDIx_size_16_color_FFFFFF_t_70]: /images/20220216/9ee94103d6f84271aaf2b289521f6818.png
[Link 7]: http://jquery.cuishifeng.cn/not.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDYxNDIx_size_16_color_FFFFFF_t_70 1]: /images/20220216/d1771f1a485346078dc6d06fa4123fb1.png
[Link 8]: http://jquery.cuishifeng.cn/data.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDYxNDIx_size_16_color_FFFFFF_t_70 2]: /images/20220216/4d738e0673534f85b7c25f4fb7ab8082.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDYxNDIx_size_16_color_FFFFFF_t_70 3]: /images/20220216/99fc5d799ed24ee5997116061bf2623d.png