Ajax局部刷新jsp页面

Ajax局部刷新jsp页面

一、需求

用户在使用复选框时，复选框的选项可能随用户的操作而发生变化，这时需要刷新该复选框选项，同时做到不刷新整个页面，也就是只刷新jsp页面的一部分，使用ajax异步请求可以实现。

二、实现

2.1 复选框表单

<form action="servlet/mergeRdfServlet" method="post">
  <div id="refreshCheckbox"></div> <!--待填充复选框-->
  <div>
    <button type="button">Cancel</button>
    <button type="button" id="btnRefresh">Refresh</button><!--刷新按钮-->
    <button type="submit">Merge</button> <!--提交按钮-->
  </div>
</form>

2.2 ajax请求

$(document).on("click","#btnRefresh",function(){
  $.ajax({
    url:"servlet/refreshServlet", //请求servlet路径
    type:"POST", //POST请求
    async:true, //异步请求
    success:function(data){ //请求成功，data为sevlet返回的数据
      $("#refreshCheckbox label,br").remove(); //清除原本复选框
      var json = eval("("+data+")"); //将servlet返回的json数组转换为js对象
      
      //动态填充复选框
      if(json.length > 0){
        for(var i=0; i<json.length; i++){
          var label = document.createElement("label");
                         var input = document.createElement("input");
                         input.type="checkbox";
                         input.name="filesName";
                         input.value=json[i]; //复选框赋值
                         label.appendChild(input); //使用appendChild添加子标签
                         var span = document.createElement("span");
                         span.innerText=json[i];
                         label.appendChild(span);
                         var br = document.createElement("br");
                         document.getElementById("refreshCheckbox").appendChild(label);
                         document.getElementById("refreshCheckbox").appendChild(br);
        }
      }
    },
    error:function(){ //请求失败
      alert("Something Wrong")
    }
  })
})

2.3 servlet

@WebServlet("/refreshServlet")
public class RefreshServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        //获取RDF文件名
        String path = "src/main/webapp/publish/RDF";
        File f = new File(path);
        File[] files = f.listFiles();
        ArrayList<String> arrayList = new ArrayList<>();
        if(files != null){
            for (File file : files) {
                String filename = file.toString().substring(file.toString().lastIndexOf("/") + 1);
                if (filename.endsWith(".ttl")) {
                    arrayList.add(filename);
                }
            }
        }
        //ArrayList转为JSON数组，并将数据返回给ajax
        String[] filesName = arrayList.toArray(new String[0]);
        JSONArray jsonArray = (JSONArray) JSONArray.toJSON(filesName);
        PrintWriter out;
        resp.setCharacterEncoding("utf-8");
        out = resp.getWriter();
        out.write(jsonArray.toString());
        out.flush();
        out.close();
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
        this.doGet(req,resp);
    }
}