如何使用JavaScript，Spring Boot在JSP中附加在按钮点击的div中保存数据？

如何解决如何使用JavaScript，Spring Boot在JSP中附加在按钮点击的div中保存数据？

我有一个城市下拉列表和一个将城市添加到供应商模型的按钮。所以我想在每次点击按钮时在 div 中添加选定的城市名称。 例如，我在下拉列表中有城市列表，假设我选择了班加罗尔，当点击添加按钮时，它应该被添加到 div 中，当我刷新页面时，div 列表应该是持久性的。这意味着,当页面重新加载或刷新时，添加的城市应显示在 div 中。目前我遇到的问题是当我重新加载页面时，我在点击按钮后添加的城市每次都被清空。所以我需要这方面的帮助。 任何建议都会对我有帮助。

以下是我的 api 控制器代码，用于将所选城市保存到数据库中：

@RequestMapping(value = AkApiUrl.setdeliverycity,method = { RequestMethod.POST,RequestMethod.GET },produces = { MediaType.APPLICATION_JSON_VALUE })
    public ResponseEntity<?> setdeliverycity(HttpServletRequest request,HttpSession session,@RequestParam("delivercityid") String  delivercityid,@RequestParam("vendorid") String  vendorid) {
        Customresponse = ResponseFactory.getResponse(request);
        try {
            User loginuser = (User) session.getAttribute("user");
            Long vid = Long.parseLong(vendorid);
            User vendor = userDao.findByUserid(vid);   
            String vendorname = vendor.getName();
            Long cid = Long.parseLong(delivercityid);
            DeliveryCity city = deliverycityDao.findByDelivercityid(cid); 
            vendorCity vendorCity = new vendorCity();
            vendorCity.setvendorcity(city);
            vendorCity.setName(vendorname);
            vendorCity.setvendorid(vendor);
            vendorCity.setCreatedby(loginuser);
            vendorCity delivercity = vendorcitydao.save(vendorCity);
            if (delivercity != null) {
                Customresponse.setResponse(delivercity);
                Customresponse.setStatus(CustomStatus.OK);
                Customresponse.setStatusCode(CustomStatus.OK_CODE);
                Customresponse.setResponseMessage(CustomStatus.SuccessMsg);
            }
        } catch (Exception e) {
            e.printstacktrace();
            Customresponse.setResponse(null);
            Customresponse.setStatus(CustomStatus.Error);
            Customresponse.setStatusCode(CustomStatus.Error_CODE);
            Customresponse.setResponseMessage(CustomStatus.ErrorMsg);
        }
        return new ResponseEntity<ResponseDao>(Customresponse,HttpStatus.OK);
    }

以下是 Ajax 成功时单击按钮将城市添加到 div 的脚本：

function addcity(){
        var vendorid = document.getElementById('vendordeliveryid').value; 
        var delivercityid = document.getElementById('vendorcitydd').value;
        var url = "../api/setdeliverycity";
        $.post(url,{
            delivercityid : delivercityid,vendorid : vendorid,},function(data,status) {
            if (data.status == "OK") {
                if (data.statusCode == 1) {
                    debugger
                    console.log(data.response);
                    var vendor = data.response;
                    var vid = vendor.vendorcityid;
                    var city = vendor.vendorcity.city;
                    var citydiv = "";   
                    var cityid = vendor.vendorcity.delivercityid;
                    var citylistlength = city.length;
                    if(citylistlength > 0) {
                        citydiv = citydiv+"<div>"+city+" &nbsp;<i class=\"fa fa-times\" onclick=\"removecity('"+cityid+"')\"></i></div>";
                    }else{
                        citydiv = citydiv+"<div style=\"text-align: center; float: left; margin-left: 40%; font-size: medium; font-weight: bolder; background: blanchedalmond;\"><span>Choose city from list</span></div>";
                    }
                    $('#citydivid').append(citydiv);
                    $('#cid').val(cityid);
                    $('#vendorcityid').val(vid);
                } else {
                    var error = data.responseMessage;
                    swal(error,"","error");
                }
            } else {
                var error = data.responseMessage;
                swal(error,"error");
            }
        });
    }

解决方法

您可以检查页面加载是否在 localStorage 中有任何数据。如果有，您可以获取该数据并调用您的 ajax 以执行进一步的代码，如果数据是，则在此 ajax 调用中成功附加到您的 DOM 中，您可以清除以前的数据并保存新数据，即：localStorage 中的 vendorid..etc。

这里是示例代码，它应该可以工作：

 $(function() {
  //check if the localStorage is not null
  if (localStorage.getItem("delivercityid") != null) {
    var delivercityid = localStorage.getItem("delivercityid"); //get that value
    var vendorid = localStorage.getItem("vendorid");
    ajax_call(vendorid,delivercityid); //call function
    localStorage.clear(); //clear from here after page load..
  }

});

function addcity() {
  var vendorid = document.getElementById('vendordeliveryid').value;
  var delivercityid = document.getElementById('vendorcitydd').value;
  ajax_call(vendorid,delivercityid)
}

function ajax_call(vendorid,delivercityid) {
  var url = "../api/setdeliverycity";
  $.post(url,{
    delivercityid: delivercityid,vendorid: vendorid,},function(data,status) {
    if (data.status == "OK") {
      if (data.statusCode == 1) {
        debugger
        console.log(data.response);
        var vendor = data.response;
        //..
        //other codes..
        localStorage.setItem("vendorid",vendorid);
        var delivercityid_datas = JSON.parse(localStorage.getItem("delivercityid")) || []; //all datas
        delivercityid_datas.push(delivercityid); //push new data inside localstorage
        localStorage.setItem("delivercityid",JSON.stringify(delivercityid_datas)); //reinitalze again
      } else {
        var error = data.responseMessage;
        swal(error,"","error");
      }
    } else {
      var error = data.responseMessage;
      swal(error,"error");
    }
  });

}