Не отправляйте Ajax с JQuery - PullRequest
Новая
       10

Не отправляйте Ajax с JQuery

0 голосов
/ 09 июля 2020

Я хочу отредактировать таблицу (с вводом, который находится в ней ячейки) sendind Ajax на бэкэнде с JQuery. После этого моя таблица должна обновиться sh.

Это мой код:

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";
    }

}

Но когда я нажимаю кнопку ajax не отправлять, отправляйте запрос (без ajax) на бэкэнд. Помогите мне решить эту проблему.

Ответы [ 2 ]

0 голосов
/ 09 июля 2020

Установка processData на false предотвратит преобразование jQuery данных в строку запроса. См. docs для получения дополнительной информации.

Установка contentType на false является обязательной, поскольку в противном случае jQuery установит его неправильно.

Подробнее обсуждение здесь 

$.ajax({
   url : '/changeElementTable',
   type: 'POST',
   data: form_data,
   contentType: false,
   processData: false,
   success : function(responce) {
   },
   error : function(){
     alert("error");
   }
});
0 голосов
/ 09 июля 2020

Попробуйте использовать этот код в 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">Отправить</button></td>
        </form>
    </tr>
    <tr></tr>
    <th></th>
    </tbody>

</table>

<script>
$("#subscription_order_form").submit(function(e) {
    e.preventDefault();
    editAjax();
})
function editAjax() {
    $(':input').removeAttr('readonly');
    var form_data = $('#subscription_order_form').serialize();

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



        },
        error : function(){
            alert("error");
        }
    });
}
</script>
...