So lösen Sie das Problem eines Ajax-Datenparameterfehlers, der zum Absturz der Seite führt

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

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 Situation, die den Ajax-Fehler verursacht hat, habe ich mir den Code lange angesehen, bevor ich den Grund entdeckt habe wurde nicht durch Parameter verursacht,
weil ich dachte, dass die Daten falsch waren, der Bericht falsch war oder die Ergebnisse anders waren. Wie erwartet war ich noch zu jung.

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:

So verwenden Sie Vux in einem Vue-Projekt

So verwenden Sie Slots in Vue, um übergeordnete Elemente zu verteilen Komponenten

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem eines Ajax-Datenparameterfehlers, der zum Absturz der Seite führt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!