关于按钮的点击后等待ajax响应结果相关问题

项目新模块有一个需求是实时调用其他系统的接口获取数据，在页面显示有一个立即更新按钮，当点击按钮时，js中触发一个click事件，获取到页面上所有的so号组装成一个数组形式，通过异步的ajax请求发送到后台，后台拿到数据后解析每一个so号进行遍历，把so号(参数)传到对应接口的参数中，调用service层的方法拿到接口返回的结果并做进一步解析。

需求:页面提供按钮：“立即更新数据”，点击后触发涉及的接口实时更新，自动获取最新数据。

ftl页面

//立即更新功能
   var so_arr = new Array();
   var flag = true;
   $("#nowdata").click(function(){
       $("#nowdata").css("background-color","#999");
   var list = $("#so_list").find('tr');
   $.each(list,function(index,tr){
      if(index == 0){
          return true;
      }
      var td = $(tr).find('td')[0];
      var inp = $(td).find('input')[0];
      var so_val = $(inp).val();
//      so_arr[index-1] = val;
           so_arr.push(so_val);
   });
   var so_arrs = so_arr.join(',');
//   console.log(so_arrs);
   layer.msg('执行中', {icon: 16});
   $("#nowdata").attr("disabled","disabled");
   if(!flag){
      return;
   }
   $.ajax({
           url: "${rc.contextPath}/boship/updata",
           data:{
               "so_arrs" : so_arrs
           },
           async : true,
           type:"post",
           dataType: "json",
           success: function(data){
       if(data.result == "success") {
           layer.confirm("更新成功",{btn: ['确定']},
           function(){window.location.reload(true);});
           $("#nowdata").css("background-color","#1a5a97");
           $("#nowdata").attr("disabled","");
           flag = true;
       } else {
           $("#nowdata").attr("disabled","");
           flag = true;
           layer.confirm("更新成功",{btn: ['确定']},
           function(){window.location.reload(true);});
       }
   }});
   });

</script>

说明：当点击按钮时，底色改变为灰色 $("#nowdata").css("background-color","#999"); 页面的显效果是有加载中的图标，按钮的功能change为disabled，不能再点击，然后再发起异步的ajax请求，data参数传递到后台。

后台成功调用接口后返回了数据，返回的json到ajax的成功回调函数(data)，通过data.result取到success，执行layer.confirm();点击确定，页面重新加载，样式颜色恢复，disabled属性remove。

jsonObject.put("result", "success");

return jsonObject.toJSONString();

总结：针对这个需求所反馈的情况，在采用异步的ajax请求下，防止立即更新按钮反复的被点击，造成调用接口频繁，对系统造成负荷过大，影响系统运行。在得到ajax响应结果后执行layer.confirm();点击确定后页面会执行刷新数据。

关于按钮的点击后等待ajax响应结果相关问题

猜你喜欢