利用ajax實現前後臺交互

HTML界面（重要元素id="userRole"）

 <div>
   <label >用戶角色：</label>
   <!-- 列出所有的角色分類 -->
   <select name="userRole" id="userRole"></select>
   <font color="red"></font>
 </div>

 Js利用ajax發送請求(重要元素：

   type:"GET",//請求類型
   url:"/ajax",//請求的url
   data:{method:"provider"},//請求參數
   dataType:"json",//ajax接口（請求url）返回的數據類型   
   success:function(data) //從servlet傳過來的參數 data[i].id,data[i].proName

)

$.ajax({
		type:"GET",//請求類型
		url:"/ajax",//請求的url
		data:{method:"provider"},//請求參數
		dataType:"json",//ajax接口（請求url）返回的數據類型
		success:function(data){//data：返回數據（json對象）
			if(data != null){
				$("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);
					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);
		}
	});

 servlet控制層  （我們所關注的是

String json = JSON.toJSONString(list);
resp.getWriter().write(json);
這兩行代碼。主要就是獲取一個數組對象list，然後將它轉化爲JSON格式的數組傳送給前端的data中
注：我用的是response對象寫入數據，瀏覽器解析時可能會出現亂碼的問題
因此設置編碼格式:resp.setContentType("text/html;charset=utf-8");）

        String method = req.getParameter("method");
        if(method.equals("provider")){
            IProviderService providerService = new ProviderServiceImpl();
            ArrayList<Provider> list = providerService.selectAllProviderS();
            String json = JSON.toJSONString(list);
            System.out.println("providerJson"+json+'\n');
            resp.getWriter().write(json);
        }