利用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);
        }