利用ajax实现前后台交互

矫情吗；* 2023-06-19 07:25 12阅读 0赞

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

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