Блог

Добрый день

Я пытаюсь отправить запрос Ajax post с помощью jquery.
Для этой цели я использую загрузочный модал для сбора данных и отправки в PostgreSQL DB.
Данные передаются в раздел визуализации с использованием EJS.
Итак, в итоге я получаю неопределенное значение данных POST request.

я помечаю, чтобы запустить модальный

   <span data-toggle="tooltip" data-placement="bottom" title="Edit task">
      <a data-toggle="modal" data-target="#editTaskModal">
        <i class="editTask fas fa-pencil-alt" data-id="<%= task.id%>" data-description="<%= task.description%>"></i>
      </a>
    </span>
  </span>
  

Модальный

 <div class="modal fade" id="editTaskModal" tabindex="-1" aria-labelledby="editTaskModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form class="" action="/edit" method="post">
        <input type="hidden" id="editTaskId" name="id" value="" />
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Edit Task</h5>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <div class="input-group-prepend">
            </div>
            <input autocomplete="off" id="editTaskDescription" name="taskDescription" class="form-control" aria-label="With textarea"></input>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="confirmEditTask btn btn-primary">Edit Task</button>
        </div>
      </form>
    </div>
  </div>
</div>
  

Скрипт Jquery для обработки данных

Я беру значение предыдущей записи и помещаю в модальную форму ввода для редактирования. Скопируйте также идентификатор элемента, чтобы он соответствовал элементу базы данных, и обновите.

 $(document).on("click", '.editTask', function() {
    $("#editTaskDescription").val($(this).attr('data-description'));
    $("#editTaskId").val($(this).attr("data-id"));
    var id = $(this).attr("data-id");
    var url = '/edit/'   id;
    $(".confirmEditTask").on("click", function(event) {
      const newDescription = $("#editTaskDescription").val()
      alert(newDescription)
      if (!null) {
        $.ajax({
          type: "POST",
          url: url,
          data: newDescription,
          success: function(result) {
            $("#editTaskModal").modal('hide')
            console.log("editing task");
            window.location.href = '/'
          },
          error: function(err) {
            console.log(err);
          }
        })
      }
    })
  })
})
  

SQL-запрос
Чтобы проверить, что такое req.params.newDescription, я регистрирую его и вижу, что оно «не определено».

 // Edit task by ID
app.post('/edit/:id', function(req, res) {
  console.log(req.params.newDescription);
    pool.query("UPDATE tasks SET description=$1 WHERE id=$2", [req.params.newDescription, req.params.id]);
    res.sendStatus(200);
})
  

Пожалуйста, сообщите, как запрос Jquery Ajax POST должен передавать ДАННЫЕ на сервер. Тип данных столбца «описание» может варьироваться в зависимости от символа. Сталкиваюсь ли я с проблемой несовместимости типов данных?

Данные, которые вы передаете в свой ajax-запрос, неверны. Создайте свой объект в пару ключ-значение и передайте его в запрос. Вот один из примеров. Вы можете использовать encodeURIComponent() ИЛИ encodeURI()для экранирования любых специальных символов и можете найти документ здесь —

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

 var data = {"newDescription": $("#editTaskDescription").val()}
  

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

предполагается, что принимающее имя конечных точек для его параметра равно «newDescription»

например

   [HttpPost("edit/{id}")]
  public ActionResult Edit([FromUrl]string id,[FromBody] string newDescription)
  {
            
  }
  

 $(document).on("click", '.editTask', function() {
    $("#editTaskDescription").val($(this).attr('data-description'));
    $("#editTaskId").val($(this).attr("data-id"));
    var id = $(this).attr("data-id");
    var url = '/edit/'   id;

    $(".confirmEditTask").on("click", function(event) {

      const newDescription = $("#editTaskDescription").val()

      if (!null) {
        $.ajax({
          type: "POST",
          url: url,
          data: {"newDescription": newDescription },
          success: function(result) {
           
          },
          error: function(err) {
            console.log(err);
          }
        })
      }
    })
  })
})
  

например

   [HttpPost()]
  public ActionResult Edit(int id, string name)
  {
            
  }
  

тогда данные будут

 var data = {"id": 232, "name": "SomeFancyName" },
  

   $.ajax({
          type: "POST",
          url: url,
          data: data,
          success: function(result) {
           
          },
          error: function(err) {
            console.log(err);
          }
        })