Bonne journée

J'essaye d'envoyer une demande de publication Ajax avec jquery.
À cette fin, j'utilise un modal bootstrap pour récupérer des données et les envoyer à la base de données PostgreSQL.
Les données sont renvoyées à la section rendue en utilisant EJS.
Donc, à la fin, j'obtiens la valeur indéfinie des données de demande POST.


Je balise pour déclencher le modal

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

Le modal

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

Script Jquery pour traiter les données

Je saisis la valeur de l'enregistrement précédent et le place dans le formulaire d'entrée modale pour le modifier. Copiez également l'ID de l'élément afin de le faire correspondre avec l'élément de base de données et mettre à jour.

$(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);
          }
        })
      }
    })
  })
})

Requête SQL Afin de vérifier ce qu'est le req.params.newDescription, je l'enregistre et vois qu'il est "indéfini".

// 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);
})

Veuillez indiquer comment la requête Jquery Ajax POST doit transmettre les données au serveur. Le type de données de la colonne «description» varie en fonction des caractères. Suis-je confronté à un problème de non-compatibilité du type de données?


0
PanchoChi 15 sept. 2020 à 19:57

2 réponses

Meilleure réponse

Les données que vous transmettez à votre requête ajax sont fausses. Construisez votre objet dans une paire clé / valeur et transmettez-la dans la requête. Voici un exemple. Vous pouvez utiliser encodeURIComponent () OU encodeURI () pour échapper tous les caractères spéciaux et trouver le document ici -

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

var data = {"newDescription": $("#editTaskDescription").val()}
1
Joe Z 15 sept. 2020 à 19:53

Vous fermez ainsi les données doivent simplement être un objet de clé de dictionnaire similaire, puis de valeur, où la clé est toujours du texte .... voir ci-dessous

En supposant que le nom des points de terminaison acceptant pour son paramètre est "newDescription"

Par exemple.

  [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);
          }
        })
      }
    })
  })
})

Par exemple.

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

Alors les données seraient

var data = {"id": 232, "name": "SomeFancyName" },
  $.ajax({
          type: "POST",
          url: url,
          data: data,
          success: function(result) {
           
          },
          error: function(err) {
            console.log(err);
          }
        })
1
Seabizkit 16 sept. 2020 à 12:55