Spring Boot и Thymeleaf остаются на той же странице, после отправки запроса - PullRequest
Новая
       21

Spring Boot и Thymeleaf остаются на той же странице, после отправки запроса

0 голосов
/ 24 сентября 2018

Я создал веб-приложение, которое ищет автомобильные онлайн-объявления и заполняет страницу несколькими таблицами после запроса на публикацию. Это выглядит так:

enter image description here

После поиска:

enter image description here

Каждый элемент таблицы имеет кнопку сохранения, которая должна сохранять эти значения в базе данных, но моя проблема заключается в том, чтостраница обновляется после отправки запроса.Как я могу сделать это без обновления страницы?

Таблица: 

  <form th:action="@{/saveAd}" method="POST">
    <table class="table table-sm table-hover">
      <thead class="thead-dark">
        <tr>
            <th>Imagine</th>
            <th>Titlu Anunt</th>
            <!-- <th style="width: 16.66%">Link</th> -->
            <th>Pret</th>
            <th>Oras</th>
       </tr>
     </thead>
     <tbody id="myTable">
       <th:block th:each="element : ${lista}">
        <trth:onclick="'javascript:rowClicked(\'' + ${element.url} + '\');'">
          <td><img th:src="@{${element.img}}" class="size" /></td>
          <td th:text="${element.title}"></td>
          <td th:text="${element.pret}"></td>
          <td th:text="${element.oras}"></td>
          <td><input class="btn btn-danger" type="submit"value="Save"></td>
          </tr>
      </th:block>
    </tbody>

Контроллер: 

@RequestMapping(path = "/saveAd", method = RequestMethod.POST)
public String saveAd(@ModelAttribute("adValue") AdValue adValue) {
    System.out.println(adValue.getImg());
    System.out.println(adValue.getLink());
    System.out.println(adValue.getOras());
    System.out.println(adValue.getPret());
    System.out.println(adValue.getTitle());
    return "home";
}

А также, как я могу связать список с модельюобъект после нажатия кнопки сохранения?

1 Ответ

0 голосов
/ 24 сентября 2018

Полагаю, вам может понравиться этот проект.Это похоже на то, что вам нужно: https://github.com/adinafometescu/tutorials/tree/master/spring-elasticsearch

Вы можете использовать .bootstrapTable ().Это очень эффективный метод для динамического обновления вашей таблицы. 

<table id="car-table" class="table table-striped">
    <thead>
    <tr>
        <th data-field="id">Id</th>
        <th data-field="title">Title</th>
        <th data-field="price">Price</th>
        <th data-field="city">City</th>
        <th data-width="10" data-formatter="saveButtonFormatter"/>
    </tr>
    </thead>
</table>

Прелесть в том, что он сопоставляет поле данных с объектом Java.js stuff: 

function saveButtonFormatter(value, row, index){
    var adId = row.id;
    return "<button class=\"btn btn-danger \" data-title=\"Save\" 
    data-toggle=\"modal\" onclick=\"saveAd(\'"+adId+"\')\" 
    </button>"
}

Функция saveAd (adId) вызовет конечную точку отдыха и обновит таблицу начальной загрузки при успешном завершении.

Я вижу, что в вашем тимиле нет ввода,Я предлагаю не размещать весь ваш объект, если вам не нужен ввод пользователя, только идентификатор. 

// anotate the controller class with @RestController

@Autowired
AdService adService;

@PostMapping(path = "/ad/{id}")
public ResponseEntity<?> saveAd(@PathVariable("id") String id) {
    adService.saveAd(id);
    return new ResponseEntity<>(HttpStatus.ACCEPTED);
}

PS: не пишите код на румынском языке: D

...