Не отправляется ajx через JQuery

Question

Я хочу сделать редактирование таблицы через инпуты, которые находятся у неё в ячейках. После редактирования должен отправиться ajx через JQuery на бэкенд и таблица должна обновиться вот мой код:

editTable.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>



<table>
    <thead>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>LastName</th>
        <th>Phone</th>
        <th>Email</th>
    </tr>
    </thead>

    <tbody>
    <tr th:if="${records.empty}">
        <td colspan="5"> No Records Available </td>
    </tr>
    <tr th:fragment="entity-row" th:each="record : ${records}">
        <form id="subscription_order_form"  th:action="@{/changeElementTable}" method="post">
       <td><input th:value="${record.id}" name="id"  ></td>
            <td><input th:value="${record.firstName}"  id="firstName" name="firstName" ></td>
            <td><input th:value="${record.lastName}" id="lastName" name="lastName"  ></td>
            <td><input th:value="${record.phoneNumber}" id="phoneNumber" name="phoneNumber"  ></td>
            <td><input th:value="${record.email}" id="email" name="email"  ></td>
            <td><input th:value="${record.id}"  id="idRepeat" type="hidden" name="idRepeat" ></td>
            <td><button  id="button" onclick="editAjax()"  >Отправить</button></td>
        </form>
    </tr>
    <tr></tr>
    <th></th>
    </tbody>

</table>

<script>
function editAjax() {
$(':input').removeAttr('readonly');
var form_data = new FormData();
 form_data.append('id', $("#id").val());
 form_data.append('firstName', $("#firstName").val());
 form_data.append('lastName', $("#lastName").val());
 form_data.append('phoneNumber', $("#phoneNumber").val());
 form_data.append('email', $("#email").val());
 form_data.append('idRepeat', $("#idRepeat").val());

$.ajax({
    url : '/changeElementTable',
    type: 'POST',
    data:form_data,
    success : function(responce) {



    },
    error : function(){
        alert("error");
    }
});
}


</script>

</body>
</html>

Код контроллера на Java/Spring:

package ru.noorsoft.javaeducation;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import javax.persistence.Entity;
import java.util.List;

@Controller
public class TableController {
    private TableRepository tableRepository;

    public TableController(TableRepository tableRepository)
    {
        this.tableRepository=tableRepository;
    }

    @GetMapping("/editTableController")
    public String showEdit(
            Model model) {

        model.addAttribute("records", tableRepository.findAll());

        return "editTable";
    }

    @PostMapping("/changeElementTable")
    public String editRecordTable(@RequestParam(name="id")String idFirst,
            @RequestParam(name="firstName")String firstName,
                                 @RequestParam(name="lastName")String lastName,
                                 @RequestParam(name="phoneNumber")String phoneNumber,
                                 @RequestParam(name="email")String email,
                                  @RequestParam(name="idRepeat")String idHidden,
                                 Model model) {
        Long idF=Long.parseLong(idFirst);
        Long idH=Long.parseLong(idHidden);
         tableRepository.findById(idH).get().setId(idF);
        tableRepository.findById(idH).get().setFirstName(firstName);
        tableRepository.findById(idH).get().setLastName(lastName);
        tableRepository.findById(idH).get().setPhoneNumber(phoneNumber);
        tableRepository.findById(idH).get().setEmail(email);
        tableRepository.save( tableRepository.findById(idH).get());
        model.addAttribute("records", tableRepository.findAll());

        return  "editTable";
    }



}

Помогите, пожалуйста, разобраться с проблемой.

БЛОГ НА HUSL

Не отправляется ajx через JQuery

Ответы (0 шт):