利用ajax实现前后台交互-蒲公英云

利用ajax实现前后台交互

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

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