Why doesn't spring see the request from ajax?

Question

Java

Hello. Help, please, to solve a problem.

There is an ajax request on the page

function popBox(num1, num2) {
 x = confirm('Are you sure? ' + num1);
  if (x == true) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "userChangeTariff?tariffId=" + num1 + "&contractNumber=" + num2, false);
   xhr.send();
      }
        }

The application has a servlet

@RequestMapping(value = "/userChangeTariff", method = RequestMethod.POST)
    public String changeTariff(HttpServletRequest request, Locale locale, Model model)
    {
        String tariffId = (String) request.getAttribute("tariffId");
        String contractNumber = (String) request.getAttribute("contractNumber");
        System.out.println(tariffId + " " + contractNumber);
        int tariffID = Integer.valueOf(tariffId);
        Contract contract = contractService.getContractByNumber(contractNumber);
        Tariff tariff = tariffService.getEntityById(tariffID);
        contract.setTariff(tariff);
        contractService.updateEntity(contract);
        return "user/userTariffs";
    }

But for some reason ajax doesn't fire up the servlet. Why, I can't understand. What am I doing wrong?

UPD

import operator.entities.Contract;
import operator.entities.Tariff;
import operator.entities.TariffOption;
import operator.entities.User;
import operator.integration.ContractValidator;
import operator.services.api.ContractService;
import operator.services.api.TariffOptionService;
import operator.services.api.TariffService;
import operator.services.api.UserService;
import operator.services.implementation.TariffServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;
import java.util.Locale;

/**
 * A controllers to dispatch the queries of the clients.
 */
@Controller("ClientController")
public class UserController {
    @Autowired
    private UserService userService;
    @Autowired
    private ContractService contractService;
    @Autowired
    private TariffService tariffService;
    @Autowired
    private TariffOptionService optionService;
    @Autowired
    private ContractValidator contractValidator;

    @RequestMapping(value = "/userContract", method = RequestMethod.GET)
    public String contracts(HttpServletRequest request, Locale locale, Model model) {
        User user = (User) request.getSession().getAttribute("currentUser");
        model.addAttribute("contractsUserList", contractService.getAllContractsForUser(user.getUserId()));
        return "user/userContract";
    }

    @RequestMapping(value = "/userTariffs", method = RequestMethod.GET)
    public String tariffs(HttpServletRequest request, Locale locale, Model model) {
        User user = (User) request.getSession().getAttribute("currentUser");
        model.addAttribute("contractsUserList", contractService.getAllContractsForUser(user.getUserId()));
        model.addAttribute("allTariffs", tariffService.getAll());
        return "user/userTariffs";
    }

    @RequestMapping(value = "/userChangeTariff", method = RequestMethod.POST)
    public String changeTariff(HttpServletRequest request, Locale locale, Model model)
//                               @RequestParam(value = "tariffId") String tariffId,
//                               @RequestParam(value = "contractNumber") String contractNumber)
    {
        String tariffId = (String) request.getAttribute("tariffId");
        String contractNumber = (String) request.getAttribute("contractNumber");
        System.out.println(tariffId + " " + contractNumber);
        int tariffID = Integer.valueOf(tariffId);
        Contract contract = contractService.getContractByNumber(contractNumber);
        Tariff tariff = tariffService.getEntityById(tariffID);
        contract.setTariff(tariff);
        contractService.updateEntity(contract);
        return "user/userTariffs";
    }

    @RequestMapping(value = "/userTariffOptions", method = RequestMethod.GET)
    public String tariffOptions(HttpServletRequest request, Locale locale, Model model) {
        User user = (User) request.getSession().getAttribute("currentUser");
        model.addAttribute("contractsUserList", contractService.getAllContractsForUser(user.getUserId()));
        model.addAttribute("allTariffOptions", optionService.getAll());
        return "user/userTariffOptions";
    }

}

UPD2

<c:forEach var="contract" items="${contractsUserList}" varStatus="loopOne">
                               <div class="panel-heading">Number: ${contract.number}</div>
                        <div class="panel-body">

                            <h2>
                                <small>Tariff :</small>
                                    ${contract.tariff.title}
                                <br>
                                <small>Month payment :</small>
                                    ${contract.tariff.price} "RUB"
                                <small><br>Status :</small>
                                <c:if test="${contract.isBlocked() && contract.isBlockedByAdmin()}">
                                    <font color="red">Blocked by manager</font>
                                </c:if>
                                <c:if test="${contract.isBlocked() && !contract.isBlockedByAdmin()}">
                                    <font color="red">Blocked by user</font>
                                </c:if>
                                <c:if test="${!contract.isBlocked()}">
                                    <font color="green">Active</font>
                                </c:if>
                            </h2>
                        </div>
                    </div>
                </div>
                <c:if test="${contract.getIsBlocked()!=true}">
                    <div class="col-sm-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">Tariff list</div>
                            <div class="panel-body">
                                <c:forEach var="tariff" items="${allTariffs}"  varStatus="loop">
                                    <c:set var="tempId" value="${tariff.tariffId}"/>
                                    <c:if test="${contract.tariff==tariff}">
                                        <h3>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="optionsRadios${loopOne.index}"
                                                           id="optionsRadios${loopOne.index}"
                                                        ${loop.index} value="option${loop.index}" checked disabled>
                                                    <b>${tariff.title}</b>
                                                </label>
                                            </div>
                                        </h3>
                                    </c:if>
                                    <c:if test="${contract.tariff!=tariff}">
                                        <h3>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="optionsRadios${loopOne.index}"
                                                           id="optionsRadios${loopOne.index}"
                                                        ${loop.index} value="option${loop.index}">
                                                    <b>${tariff.title}</b>
                                                </label>
                                            </div>
                                        </h3>
                                    </c:if>
                                </c:forEach>
                                <div class="modal-footer">
                                    <form name="test"
                                          onclick="change(${loop.index},${tempId},${contract.number})">
                                        <button type="submit" class="btn btn-success">Change</button>
                                    </form>
                                    <script>
                                        function change(par1, par2, par3) {
                                            var rad = document.getElementsByName('optionsRadios' + par1);
                                            for (var i = 0; i < rad.length; i++) {
                                                if (rad[i].checked) {
                                                    popBox(par2, par3);
                                                }
                                            }
                                            function popBox(num1, num2) {
                                                x = confirm('Are you sure? ');
                                                if (x == true) {
                                                    var xhr = new XMLHttpRequest();
                                                    xhr.open("POST", "userChangeTariff?tariffId=" + num1 + "&contractNumber=" + num2, true);
                                                    xhr.send();
                                                }
                                            }
                                        }
                                    </script>

Answer 1

<c:if test="${contract.getIsBlocked()!=true}">
                    <div class="col-sm-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">Tariff list</div>
                            <div class="panel-body">
                                    ${tempId.clear()}
                                <c:forEach var="tariff" items="${allTariffs}" varStatus="loop">
                                    <c:set var="t">${tempId.add(tariff.tariffId)}</c:set>
                                    <c:if test="${contract.tariff==tariff}">
                                        <h3>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="optionsRadios${loopOne.index}"
                                                           id="optionsRadios${loopOne.index}"
                                                        ${loop.index} value="option${loop.index}" checked disabled>
                                                    <b>${tariff.title}</b>
                                                </label>
                                            </div>
                                        </h3>
                                    </c:if>
                                    <c:if test="${contract.tariff!=tariff}">
                                        <h3>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="optionsRadios${loopOne.index}"
                                                           id="optionsRadios${loopOne.index}"
                                                        ${loop.index} value="option${loop.index}">
                                                    <b>${tariff.title}</b>
                                                </label>
                                            </div>
                                        </h3>
                                    </c:if>
                                </c:forEach>