通過 Jquery Ajax POST 請求將數據傳遞到 Postgresql DB

Question

再會

我正在嘗試使用 jquery 發送 Ajax post 請求。
為此，我使用引導模式來獲取數據並發送到 PostgreSQL 數據庫。
數據被引用到使用 EJS 渲染的部分。
所以最后我得到了 POST 請求數據的未定義值。

---

i 標記以觸發模態

  <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腳本

我獲取上一條記錄的值並放入模態輸入表單中進行編輯。 復制項目的 id 以與數據庫項目匹配並更新。

$(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 請求應如何將數據傳遞給服務器。 “描述”列的數據類型是字符變化的。 我是否面臨數據類型不兼容的問題？

---

Answer 1

您傳遞到 ajax 請求中的數據是錯誤的。 將您的對象構建為鍵值對並將其傳遞到請求中。 這是一個例子。 您可以使用 encodeURIComponent() 或 encodeURI() 來轉義任何特殊字符，並且可以在此處找到文檔 -

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

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

Answer 2

你如此接近數據必須只是一個像字典鍵然后是值的對象，其中鍵總是文本......見下文

假設其參數的接受端點名稱是“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);
          }
        })