Comment résoudre le problème de crash de page dû à une erreur de paramètre de données en ajax

Cette fois, je vais vous montrer comment résoudre le problème de crash de page causé par une erreur de paramètre de données en ajax. Quelles sont les précautions pour résoudre le problème de crash de page causé par une erreur de paramètre de données en ajax. Ce qui suit est un cas pratique.

Aujourd'hui, j'allais envoyer les données d'une ligne de la table sélectionnée au backend via ajax, mais le site Web a planté.

Le code est le suivant :

$('.icon-edit').click(function (event) {  这是一个按钮
    o=$('.icon-edit').index($(this))+1;
    edit.style.display='block';
    //console.log('$(this)',$(this).parent().parent());
    let message=$(this).parent().parent();
    $("#non").val(message.children('td:eq(0)').html());
    $("#name").val(message.children('td:eq(1)').html());
    $("#sex").val(message.children('td:eq(2)').html());
    $("#age").val(message.children('td:eq(3)').html());
    $("#xueyuan").val(message.children('td:eq(4)').html());
    $("#grade").val(message.children('td:eq(5)').html());
    $("#phone").val(message.children('td:eq(6)').html());
    $("#room").val(message.children('td:eq(7)').html());
    l=message.children('td:eq(0)').html();
  });
  $('#ok').click(function () {
    //event.stopImmediatePropagation();
    let text=$('table');
    id=$('#non').val();
    username=$('#name').val();
    sex=$('#sex').val();
    age=$('#age').val();
    institute=$('#xueyuan').val();
    grade=$('#grade').val();
    phone=$('#phone').val();
    hlbhl=$('#room').val()
    text.find("tr:eq("+o+")").children('td:eq(0)').text(id);
    text.find("tr:eq("+o+")").children('td:eq(1)').text(username);
    text.find("tr:eq("+o+")").children('td:eq(2)').text(sex);
    text.find("tr:eq("+o+")").children('td:eq(3)').text(age);
    text.find("tr:eq("+o+")").children('td:eq(4)').text(institute);
    text.find("tr:eq("+o+")").children('td:eq(5)').text(grade);
    text.find("tr:eq("+o+")").children('td:eq(6)').text(phone);
    text.find("tr:eq("+o+")").children('td:eq(7)').text(hlbhl);
    $.ajax({
      type: "POST",
      url: "doAction2.php",//请求的后台地址
      data: {
            non:o,
            id: id,
            username: username,
            sex: sex,
            age: age,
            institute: institute,
            grade: grade,
            phone: phone,
            hlbhl: hlbhl
      },//前台传给后台的参数
      dataType: "json",
      ansync: true,
      ContentType: "application/json; charset=utf-8",
      success: function (msg) {//msg:返回值
        a=2;
        console.log(a);
      }
    });
    edit.style.display='none';
  });

L'idée générale du code est que je clique sur un bouton ($('.icon-edit')) puis sur un formulaire (modifier) ​​apparaît. Le formulaire est l'endroit d'où proviennent les données. Cliquez, puis modifiez le contenu du tableau grille
Cliquez sur le bouton OK ($('#ok')) pour écraser. les données du formulaire avec les données de la ligne précédemment cliquée pour atteindre l'objectif de modification du tableau. Lorsque vous cliquez sur OK Déclenchez ajax,
envoyez les données modifiées au backend, récupérez les données et mettez à jour la base de données.

La page de résultats n'a pas signalé d'erreur, mais a planté directement. Après une longue vérification, j'ai découvert que le paramètre data d'ajax était mal écrit. Il était écrit comme ceci auparavant :

    id=text.find("tr:eq("+o+")").children('td:eq(0)').text(id);
    username=text.find("tr:eq("+o+")").children('td:eq(1)').text(username);
    sex=text.find("tr:eq("+o+")").children('td:eq(2)').text(sex);
    age=text.find("tr:eq("+o+")").children('td:eq(3)').text(age);
    institute=text.find("tr:eq("+o+")").children('td:eq(4)').text(institute);
    grade=text.find("tr:eq("+o+")").children('td:eq(5)').text(grade);
    phone=text.find("tr:eq("+o+")").children('td:eq(6)').text(phone);
    hlbhl=text.find("tr:eq("+o+")").children('td:eq(7)').text(hlbhl);
    $.ajax({
      type: "POST",
      url: "doAction2.php",//请求的后台地址
      data: {
            non:o,
            id: id,
            username: username,
            sex: sex,
            age: age,
            institute: institute,
            grade: grade,
            phone: phone,
            hlbhl: hlbhl
      },//前台传给后台的参数
      dataType: "json",
      ansync: true,
      ContentType: "application/json; charset=utf-8",
      success: function (msg) {//msg:返回值
        a=2;
        console.log(a);
      }
    });
    edit.style.display='none';
  });

Comme vous pouvez le voir dans le Out ci-dessus, les données que j'ai transmises à data n'étaient pas une

chaîne ou similaire, mais un n.fn.init [td, prevObject: n.fn.init( 1), contexte : document ], En raison de mon insouciance et de ma mauvaise compréhension des situations qui provoquaient les erreurs ajax, j'ai longuement regardé le code avant d'en découvrir la cause. cela ne serait pas causé par des paramètres,

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour implémenter le plug-in de défilement plein écran dans ES6

A résumé de l'utilisation de la montre dans Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!