如何使用 JavaScript、Spring 引导将附加在 JSP 中的按钮单击的数据保存在 div 中？

Question

我有一个城市下拉列表和一个用于将城市添加到供应商模型的按钮。所以我想在每次单击按钮时在 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");
            }
        });
    }

Answer 1

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

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

 $(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");
    }
  });

}

如何使用 JavaScript、Spring 引导将附加在 JSP 中的按钮单击的数据保存在 div 中？

How to persist data inside div that appended on button click in JSP using JavaScript, Spring Boot?

javascript

ajax

jsp

jpa

spring-boot