Ajax 请求数据

----------------------------html-------------------------
	    <ul class="forminfo"  id="attrContent">

	   
	    <li  id="select_id"><label>商品类型<b>*</b></label>  
		    <div class="vocation">
		       <select id="type_id" name="GoodsAttr[type_id]" class="select1">
	             <option value="" selected>选择类型</option>
			       <?php foreach ($typeData as $v): ?>
	                   	<option value="<?php echo $v['id']; ?>">
	                     	<?php echo $v['type_name']; ?>
	                   	</option>
	               <?php endforeach; ?>
			    </select>
		    </div>
	    </li>
	    
	    
     </ul>



----------------------------------JQ 代码-----------------------
//根据类型获取对应的属性
    	$("#type_id").change(function(){
    		// 获取当前类型的id
    		var type_id = $(this).val();
    		if(type_id > 0)
    		{    
    		    //删除之前的所有
    			$("#select_id~li").remove();
    		    //请求ajax
    			$.ajax({
    					type : "GET",
    					url  : "__CONTROLLER__/ajaxGetAttrForm/type_id/"+type_id,
    					dataType : "json",
    					success : function(data)
    					{
    						// 在这处理服务器返回的数据
    						var html = '';
    						$(data).each(function(k,v){
    							// 循环每一行是一个li,li中有两个字段,第一个里是属性的名字,第二个里是表单元素
    							//<label>招聘企业<b>*</b></label>
    							html += '<li>';
    								html += '<label>';
    								html += v.attr_name;   // 属性名称
    							
    								html += '<b>*</b></label>';
    								// 如果属性是唯一属性
    								if(v.attr_type == 0)
    								{
    									// 如果没有可选值就输出文本框
    									if(v.attr_value == "")
    									{
    										html += "<input type='text' name='GoodsAttr["+v.id+"]' width='344px' class='dfinput'  />";
    									}
    									else
    									{   
    										html += "<div class='vocation'>";
    										html +="<div class='uew-select'>";
    										
    										html +="<select class='select1' name='GoodsAttr["+v.id+"]'>";
    										// 把可选值转化成数组
    										var arr = v.attr_value.split(",");
    										for(var i=0; i<arr.length; i++)
    										{  
    											html += "<option  value='"+arr[i]+"'>"+arr[i]+"</option>";
    										}
    										html += "</select></div></div>";
    									}
    								}
    								else
    								{
    									// 单选的属性
    									html +="<div class='vocation'>";
    									html +="<div class='uew-select'>";
    									html += "<a   href='javascript:;' >[+]</a>";
    									html += "<select style='width: 345px;opacity:1;border: 1px solid #bcbcbc;' class='select1' name='GoodsAttr["+v.id+"][]'>";
    									var arr = v.attr_value.split(",");
    									for(var i=0; i<arr.length; i++)
    									{
    										html += "<option  value='"+arr[i]+"'>"+arr[i]+"</option>";
    									}
    									html += "</select>";
    									
    									html +="</div>";
    									
    									html +="</div>";
    								}
    							html += '</li>';
    					});
    					 
    						$("#attrContent").append(html);
    					}
    				});
    		}
    		else
    		{
    			// 如果没有选择类型就清空   删除第一个li后所有兄弟元素
    			$("#select_id~li").remove();
    		}
    	});
--------------------控制器---------------------------------------
	#Ajax获取属性
	public function ajaxGetAttrForm($type_id)
	{   
	   
		// 根据类型的ID取出这个类型中所有的属性
		$m = M('Attribute');
		$data = $m->where('type_id='.$type_id)->select();
	
		echo json_encode($data);
	}

  

posted @ 2014-12-11 10:18  麦田守望者~  阅读(176)  评论(0编辑  收藏  举报