select选择标签与Ajax运用

有时候在写页面的时候会碰上需要使用到select选择标签的情景，它需要我们从后端拿到想要的数据，然后返回前端，展示，在一张表上，是比较容易做到的，但是在双表或者多表，就需要用到Ajax，通过Ajax完成从另一张表中拿到数据再和这个表一起加载到前端

这里假设有两张表smbms_bill表和smbms_provider表，然后bill订单表有供应商表的ID，通过这个ID查到供应商表。

bill订单表，其中providerId是关联provider表

 provider表

 可以看到下图是bill订单表的字段，但是供应商不属于它的表，表中只有providerId这个字段，让他们关联起来就是一个难题。

起初，我们试着将供应商表单独查出来，通过HttpServletRequest传过去，可以将所有供应商查出来，但是在from表单中就会出现问题，因为提交表单后修改的是Bill类，与供应商名字好像没有关系，这时候又想，表单返回的是什么，拿到那个名字，再查询provider表的id,然后让它的id赋值给bill表中的providerId，这样似乎更加麻烦。

 //拿到所有的供应商
      //  List<String> pros = providerService.getprovider();
      //request.setAttribute("pros", pros);

后面发现使用Ajax更加方便!

把查到provider的id和名称封装成map，然后通过list，放入map，返回给前端，前端通过Ajax拿到这个数据，进行渲染。

后端controller层

    //查询供应商
    @RequestMapping("/getProviderList")
    @ResponseBody
    public List<Map<String,Object>> getProviderList(){

        List<Map<String,Object>> result = new ArrayList<Map<String,Object>>();
        List<Provider> providers = providerService.getProviderAll();
       
        for(int i = 0;i<providers.size();i++){
            Map<String,Object> obj = new HashMap<String,Object>();
            obj.put("id", providers.get(i).getId());
            obj.put("proName", providers.get(i).getProName());
            result.add(obj);
        }

        System.out.println(result);
        return result;

    }

js部分

$.ajax({
		type:"GET",//请求类型
	//	url:"ProviderManagerController.do?getProviderList",
		url:path+"/Provider/getProviderList",//请求的url
		data:{},//请求参数

		dataType:"json",//ajax接口（请求url）返回的数据类型
		success:function(data){//data：返回数据（json对象）
			data = JSON.parse(data);
			console.log(data+"11111")
			if(data != null){
				var pid = $("#pid").val();
				console.log(pid);
				$("select").html("");//通过标签选择器，得到select标签，适用于页面里只有一个select
				var options = "<option value=\"0\">--请选择--</option>";
				for(var i = 0; i < data.length; i++){
					//alert(data[i].id);
					//alert(data[i].proName);
					if(pid != null && pid != undefined && data[i].id == pid ){
						options += "<option selected=\"selected\" value=\""+data[i].id+"\" >"+data[i].proName+"</option>";
					}else{
						options += "<option value=\""+data[i].id+"\" >"+data[i].proName+"</option>";
					}
					
				}
				$("select").html(options);
			}
		},
		error:function(data){//当访问时候，404，500 等非200的错误状态码
			validateTip(providerId.next(),{"color":"red"},imgNo+" 获取供应商列表error",false);
		}
	});

页面部分

        <div>
            <label for="providerId">供应商：</label>
            <input type="hidden" value="${bill.providerName}" id="pid" />
			<select name="providerId" id="providerId">
		    </select>
        </div>