后台如何拿到前台元素属性的值？

后台如何拿到前台元素属性的值？

1.在前台用jquery的attr(“ ”)获取到元素属性的值
2.将获取的值通过ajax传到后台
前台代码
–使用jquery先导入jquery的js

//js代码部分
<script>
$(document).ready(function(){	
		$(".quality-item li").click(function(){	
			
			/* 获取用户选择的成色 */
			var proCondition= $(this).attr("data-id");
			
			/*发送ajax请求  */
			    $.post(
			    	"${path}/releasea",
			    	{"proCondition":proCondition},//要传给服务器的数据
			    	function(data){//data是后台过来的数据  要么是对象要么是数组
			    	alert(data);                           			    	
			    	},
			    	"json"  //要求服务器返回给浏览器的文本格式
			    );						
		});		
});

</script>

//jsp代码部分
<ul class="quality-item">
                 <!-- 成色li -->   <li class="colorli" data-id="100" class="select" quality="100">
		                <span class="quality-text">全新</span>
		                <div class="tiplayer" style="display: none;">
		                    <p>
		                        <strong>成色说明</strong>是指未开封使用过的新品。                    </p>
		                    <i class="arrow-icon"></i>
		                </div>
            		</li>
                    <li class="colorli" data-id="99"  quality="99">
                <span class="quality-text">99新</span>
                <div class="tiplayer" style="display: none;">
                    <p>
                        <strong>成色说明</strong>是指仅开封，但未使用或仅仅经过试用，外观无任何使用痕迹的货品。                    </p>
                    <i class="arrow-icon"></i>
                </div>
            </li>
                    <li class="colorli" data-id="98"  quality="98">
                <span class="quality-text">98新</span>
                
            </li>
                    <li class="colorli" data-id="95" quality="95">
                <span class="quality-text">95新</span>
                <div class="tiplayer" style="display: none;">
                    <p>
                        <strong>成色说明</strong>指使用过，但成色很新，外观无掉漆划痕，仅仅允许有轻微使用痕迹（如轻微油光）的货品。                    </p>
                    <i class="arrow-icon"></i>
                </div>
            </li>
                    <li class="colorli" data-id="90" quality="90">
                <span class="quality-text">90新</span>
                <div class="tiplayer" style="display: none;">
                    <p>
                        <strong>成色说明</strong>是指外表有少许使用痕迹（划痕或油光），但无磕碰掉漆且功能正常完好的货品。                    </p>
                    <i class="arrow-icon"></i>
                </div>
            </li>                                                      
        </ul>

后台代码
–用SpringBoot框架
–在pom.xml中导入依赖，SpringMVC的action支持返回json格式的字符串
–在方法上面加上注释@ResponseBody

<dependency>
			<groupId>com.fasterxml.jackson</groupId>
			<artifactId>jackson-parent</artifactId>
			<version>2.8</version>
			<type>pom</type>
		</dependency>
		<dependency>
			<groupId>org.codehaus.jackson</groupId>
			<artifactId>jackson-mapper-asl</artifactId>
			<version>1.9.13</version>
		</dependency>
		<dependency>
			<groupId>org.codehaus.jackson</groupId>
			<artifactId>jackson-core-asl</artifactId>
			<version>1.9.13</version>
		</dependency>

/**
	 * 前台点击li元素获取商品成色
	 * @param proCondition
	 * @return
	 */
	@ResponseBody  //如果你返回的是json格式那就需要这个注解，告诉springMVC帮你将返回的object转成json格式的字符串
	@RequestMapping("releasea")
	public Object releasea(String proCondition) {
		System.out.println(proCondition);
		return proCondition;
		
		
	}

知识点：

1.在SpringMVC的action中，如果前台通过ajax发送请求，那么后台不再返回ModelAndView,而是返回一个object对象
如果前台传给后台的是一个数组，那么后台可以用List集合接收
如果前台传给后台的是一个json对象，那么后台可以用一个实体接收

jquery获取内容和属性
text( )获取文本内容
html()
val()
attr( )

JQuery样式
.css(“ ”) 获取样式值
.css(“ ”,” ”) 为元素赋值
.addClass(“样式1”,”样式2”) 添加样式
.hasClass(“ ”)判断是否有 样式
juqery获取$(this)中指定的子元素
Find()查找所有子元素，会一直查找，跨层级查找
Children()查找直接的子元素，不会跨层级查找

—高级项目小结