使用jQuery阻止ajax异步获取的json格式数据重复提交

在前后端产参数的时候，难免会遇到在重复多次点击提交按钮的时候，数据在HTML页面上重复添加，我这里提供两种方式解决这种问题

第一种：empty()方法

在jquery中，这个方法可以用来清除掉标签的所有子元素。
试想一下，在你每次点击按钮添加数据的时候，做到把之前添加的数据删除，是不是就可以实现这种效果呢？

第二种方式：进行存在判断

在每次进行重复操作按钮时，先判断是否已经添加过该数据，如果有，那便不用再访问服务器获取数据了。
这种方式减少了用户访问服务器的次数，比较推荐使用。

下面是这部分的源码内容,不懂的地方欢迎评论留言呦

servlet部分就这些了，主要是查询数据库后传值回html

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String json = "";
        //调用到获取所有的属性信息
        QueryDao queryDao = new QueryDao();
        List<Province> provinces = queryDao.queryProvinceAll();
        //将list转为json格式的数据，输出给ajax请求
        if (provinces != null){
            //调用jackson工具库
            ObjectMapper mapper = new ObjectMapper();
            json = mapper.writeValueAsString(provinces);
        }
        //输出json数据，响应ajax请求，返回数据
        response.setContentType("application/json;charset=utf-8");
        PrintWriter pw = response.getWriter();
        pw.print(json);
        pw.flush();
        pw.close();
    }

jqueryl部分

<script type="text/javascript">
        $(function () {
            //绑定事件
            $("#btnLoad").click(function () {
                //做ajax请求
                $.ajax({
                    url: "queryProvinceServlet",
                    dataType: "json",
                    success: function (data) {
                        //alert(data);
                        if ($("#province").children().length > 1){
                            alert("已经插入了数据，不用再进行改变");
                        }else {
                        	$("#province").empty();//不一定需要加，由于我页面中本来就有一个标签，所以我加上了
                        	//alert("没有插入数据")
                        	$.each(data,function (key,value) {
                        	$("<option value=''"+ value.id +"'>"+ value.name +"</option>").appendTo($("#province"));
                            })
                        }
                    }
                })
            });
        })
    </script>
    

需要添加的HTML部分

<select id="province">
        <option value="0">请选择...</option>
</select>