Весенний контроллер MVC работает 2 раза по 1 клику

Question

Я пытаюсь сделать разбиение на страницы с использованием Spring MVC. Мой контроллер recieves 2 параметра от AJAX: - сколько элементов на странице, чтобы показать (строки) - какая страница выбрана

@Controller 
public class SymptomController { 

@Autowired 
private SymptomService symptomService; 

@RequestMapping(value = "/symptoms", method = RequestMethod.GET) 
public String symptomPage(
    @RequestParam(required = false, value = "rows") Integer rows, 
    @RequestParam(required = false, value = "page") Integer tabNumber, 
    Model model) { 
Page<Symptom> page = null; 
if ((rows == null) && (tabNumber == null)) { 
    page = symptomService.findSymptomsByPage(0, 10); 
    System.out.println(1); 
} else { 
    page = symptomService.findSymptomsByPage(tabNumber - 1, rows); 
    System.out.println(rows + " " + tabNumber); 
} 
int currentPage = page.getNumber() + 1; 
int first = Math.max(1, currentPage - 3); 
int last = Math.min(currentPage + 2, page.getTotalPages()); 

model.addAttribute("symptom", new Symptom()); 
model.addAttribute("symptomPage", page); 
model.addAttribute("currentPage", currentPage); 
model.addAttribute("first", first); 
model.addAttribute("last", last); 
return "symptoms"; 
} 

Мой JSP:

<table id="table-methods-table" 
     class="table table-hover table-bordered"> 
     <thead> 
      <tr style="background-color: #F5F5F5"> 
       <th data-field="state" data-checkbox="false" data-align="center"></th> 
       <th data-field="editBtn" data-align="center"><spring:message 
         code="label.editsymptom" /></th> 
       <th data-field="name" data-sortable="true" data-align="left"><spring:message 
         code="label.symptoms" /></th> 
       <th data-field="description" data-sortable="true" data-align="left"><spring:message 
         code="label.descpiption" /></th> 
       <!--<th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">Delete</th>--> 
      </tr> 
     </thead> 
     <tbody id="tbody"> 
      <c:forEach items="${symptomPage.content}" var="symptom"> 
       <tr> 
        <td class="bs-checkbox"><input name="SelectItem" 
         type="checkbox"></td> 
        <td><a href="#edit" data-toggle="modal"> <i 
          class="fa fa-pencil-square-o"></i></a></td> 
        <td>${symptom.name}</td> 
        <td><i>${symptom.description}</i></td> 
       </tr> 
      </c:forEach> 
     </tbody> 
    </table> 
</div> 
<ul class="pagination no-margin pull-right"> 
    <c:choose> 
     <c:when test="${currentPage == 1}"> 
      <li class="inactive"><a href="#">&laquo;</a></li> 
      <li class="inactive"><a href="#">&lt;</a></li> 
     </c:when> 
     <c:otherwise> 
      <li><a href="${firstURL}">&laquo;</a></li> 
      <li><a href="${prevURL}">&lt;</a></li> 
     </c:otherwise> 
    </c:choose> 
    <c:forEach var="i" begin="${first}" end="${last}"> 
     <c:url var="pageUrl" value="/symptoms" /> 
     <c:choose> 
      <c:when test="${i == currentPage}"> 
       <li class="active"><a href="${pageUrl}"><c:out value="${i}"></c:out></a></li> 
      </c:when> 
      <c:otherwise> 
       <li><a href="${pageUrl}"><c:out value="${i}"></c:out></a></li> 
      </c:otherwise> 
     </c:choose> 
    </c:forEach> 
    <c:choose> 
     <c:when test="${currentPage != last}"> 
      <li><a href="${nextURL}">&gt;</a></li> 
      <li><a href="${lastURL}">&raquo;</a></li> 
     </c:when> 
     <c:otherwise> 
      <li class="inactive"><a href="#">&gt;</a></li> 
      <li class="inactive"><a href="#">&raquo;</a></li> 
     </c:otherwise> 
    </c:choose> 
</ul> 
<select id="select" class="form-control" 
    style="width: 80px; margin-top: 18px;"> 
    <option selected="selected">10</option> 
    <option>25</option> 
    <option>50</option> 
    <option>100</option> 
</select> 
<script> 
    $(document).ready(function() { 
    var pads = $('ul.pagination').children(); 
    pads.click(function() { 
     $.ajax({ 
      type: 'GET', 
      url : "/hospital/symptoms", 
      data: {rows: parseInt($('#select').text()), page: parseInt($(this).text())}, 
     }); 
    }); 
    }); 
</script> 

При нажатии на кнопки страницы Получаю, что на моей консоли:

Hibernate: select count(symptom0_.id) as col_0_0_ from symptoms symptom0_ 
Hibernate: select symptom0_.id as id16_, symptom0_.symptom_description as symptom2_16_, symptom0_.symptom_name as symptom3_16_ from symptoms symptom0_ limit ?, ? 
10 3 
Hibernate: select count(symptom0_.id) as col_0_0_ from symptoms symptom0_ 
Hibernate: select symptom0_.id as id16_, symptom0_.symptom_description as symptom2_16_, symptom0_.symptom_name as symptom3_16_ from symptoms symptom0_ limit ? 
1 
Hibernate: select count(symptom0_.id) as col_0_0_ from symptoms symptom0_ 
Hibernate: select symptom0_.id as id16_, symptom0_.symptom_description as symptom2_16_, symptom0_.symptom_name as symptom3_16_ from symptoms symptom0_ limit ?, ? 
10 2 
Hibernate: select count(symptom0_.id) as col_0_0_ from symptoms symptom0_ 
Hibernate: select symptom0_.id as id16_, symptom0_.symptom_description as symptom2_16_, symptom0_.symptom_name as symptom3_16_ from symptoms symptom0_ limit ? 
1 

Это объясняет, что контроллер работает 2 раза по 1 клик. Пожалуйста, советую мне, что мне нужно сделать, чтобы контроллер работал правильно.

Answer 1

Я думаю, что браузер дважды посылает один и тот же запрос:

• один раз с яваскриптом кодом вы Worte
• один раз с нативным при клике на <a> ссылки самого

Вы можете необходимо, чтобы prevent the default browser action with jquery.

<script> 
    $(document).ready(function(event) { 
    event.preventDefault(); 
    var pads = $('ul.pagination').children(); 
    pads.click(function() { 
     $.ajax({ 
      type: 'GET', 
      url : "/hospital/symptoms", 
      data: {rows: parseInt($('#select').text()), page: parseInt($(this).text())}, 
     }); 
    }); 
    }); 
</script>