So lösen Sie das Problem des Seitenabsturzes aufgrund eines Datenparameterfehlers in Ajax

Dieses Mal zeige ich Ihnen, wie Sie das Problem des durch Datenparameterfehler verursachten Seitenabsturzes in Ajax lösen können. Welche Vorsichtsmaßnahmen gibt es, um das Problem des durch Datenparameterfehler in Ajax verursachten Seitenabsturzes zu lösen? Das Folgende ist ein praktischer Fall.

Heute wollte ich die Daten einer Zeile der ausgewählten Tabelle über Ajax an das Backend senden, aber die Website stürzte ab.

Der Code lautet wie folgt:

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

Die allgemeine Idee des Codes ist, dass ich auf eine Schaltfläche ($('.icon-edit')) und dann auf ein Formular (edit.) klicke ) erscheint. Das Formular besteht aus den aus dem Klick abgeleiteten Daten. Ändern Sie dann den Inhalt der Tabelle im Raster und klicken Sie auf die Schaltfläche „OK“ ($('#ok')), um die Formulardaten zu überschreiben Mit den Daten der zuvor angeklickten Zeile wird Ajax ausgelöst, um den Zweck der Änderung der Tabelle zu erreichen.
Senden Sie die geänderten Daten an das Backend, rufen Sie die Daten ab und aktualisieren Sie die Datenbank.

Die Ergebnisseite meldete keinen Fehler, sondern stürzte direkt ab. Nach langer Prüfung stellte ich fest, dass der Datenparameter von Ajax falsch geschrieben war:

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

Wie oben zu sehen ist, handelt es sich bei den Daten, die ich an data übergebe, nicht um

String oder ähnliches, sondern um ein n.fn.init [td, prevObject: n.fn.init(1), Kontext: Dokument], Aufgrund meiner Nachlässigkeit und meines geringen Verständnisses für die Situationen, die Ajax-Fehler verursachten, habe ich mir den Code lange angesehen, bevor ich die Ursache entdeckte durch Parameter verursacht werden,

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung des Vollbild-Scrolling-Plug-Ins in ES6

A Zusammenfassung der Verwendung von Watch in Vue

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem des Seitenabsturzes aufgrund eines Datenparameterfehlers in Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!