Why doesn't the controller change attributes?

Question

JavaScript

Hello. Help, please, to solve a problem.

Have a servlet

@RequestMapping(value = "/adminNewClient", method = RequestMethod.GET)
    public String adminNewClientGet(HttpServletRequest request, Locale locale, Model model) {
        model.addAttribute("nameStat", "ckeck");
        return "admin/adminNewClient";
    }

He works well. Passes the jsp the nameStat parameter .

<tr>
  <td><input id="surName" type="text" class="form-control" placeholder="Surname"></td>
   <td><font color="blue">${nameStat}</font></td>
 </tr>

There is a request on the page

function popBox() {
                            x = confirm('Are you sure? ');
                            if (x == true) {
                                var xhr = new XMLHttpRequest();
                                xhr.open("DELETE", "adminNewClient?name=" + name + "&surName=" + surName
                                        + "&birthday=" + birthday + "&passport=" + passport
                                        + "&adress=" + adress + "&email=" + email + "&number=" + number, false);
                                xhr.send();

                            }
                        }

It sends parameters to the servlet.

@RequestMapping(value = "/adminNewClient", method = RequestMethod.DELETE)
    public String adminNewClientPost(HttpServletRequest req, Locale locale, Model model,
                                     @RequestParam(value = "name") String name,
                                     @RequestParam(value = "surName") String secondName,
                                     @RequestParam(value = "birthday") String birthdayDate,
                                     @RequestParam(value = "passport") String passport,
                                     @RequestParam(value = "adress") String adress,
                                     @RequestParam(value = "email") String eMail,
                                     @RequestParam(value = "number") String number) {
        model.addAttribute("nameStat", "YES!"))
   return "admin/adminNewClient";
    }

It turns out. this servlet should change nameStat and the page should show YES! . But this is not happening! Although, I see that method = RequestMethod.DELETE worked. Why does this servlet not change the parameter on the page?

Answer 1

it should not change anything on the page, it should send you a new page body with YES!
look at the response in the network tab dev tool
what you see initially - 1 page
what you get as a result of an ajax request is completely different, they are not connected in any way.
all you can do is:
1. respond, for example, with json and, based on the results of ajax, change the content of certain blocks on the page...
now I'll outline an example

@RequestMapping(value = "/adminNewClient", method = RequestMethod.DELETE)
    public @ResponseBody Map adminNewClientPost(HttpServletResponse response, HttpServletRequest request,
                                     @RequestParam(value = "name") String name,
                                     @RequestParam(value = "surName") String secondName,
                                     @RequestParam(value = "birthday") String birthdayDate,
                                     @RequestParam(value = "passport") String passport,
                                     @RequestParam(value = "adress") String adress,
                                     @RequestParam(value = "email") String eMail,
                                     @RequestParam(value = "number") String number) {
     LinkedHashMap result = new LinkedHashMap();
     result.put("nameStat","YES!");
     return result;
  }

in JSP

<tr>
  <td><input id="surName" type="text" class="form-control" placeholder="Surname"></td>
   <td><span style="color:blue;" id="nameStat">${nameStat}</span></td>
 </tr>

in JS

function popBox() {
                            x = confirm('Are you sure? ');
                            if (x == true) {
                                var xhr = new XMLHttpRequest();
xhr.onload = function(){
var jsonResponse = JSON.parse(this.responseText);
for(var index in jsonResponse) { 
   if (jsonResponse.hasOwnProperty(index)) {
      document.getElementById(index).innerText = jsonResponse[index];
   }
}
};
                                xhr.open("DELETE", "adminNewClient?name=" + name + "&surName=" + surName
                                        + "&birthday=" + birthday + "&passport=" + passport
                                        + "&adress=" + adress + "&email=" + email + "&number=" + number, false);
                                xhr.send();

                            }
                        }

accordingly, on the page you can have as many elements as you like that you need to dynamically change, just add them to the response result.put("here is the id of the element's html","here is a new text");