Ajax에서 데이터 매개변수 오류로 인한 페이지 충돌 문제를 해결하는 방법

이번에는 ajax에서 데이터 매개변수 오류로 인한 페이지 충돌 문제를 해결하는 방법을 알려 드리겠습니다. ajax에서 데이터 매개변수 오류로 인해 페이지 충돌이 발생할 경우 해결하기 위한 주의 사항은 무엇입니까? 함께 살펴보세요.

오늘은 선택한 테이블의 한 행에 대한 데이터를 ajax를 통해 백엔드로 보내려고 했는데 웹사이트가 다운되었습니다.

코드는 다음과 같습니다.

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

코드의 일반적인 개념은 버튼($('.icon-edit'))을 클릭하면 양식(수정)이 나타나는 것입니다. 클릭 후 테이블 수정형식
확인 버튼($('#ok'))을 클릭하면 양식 데이터가 이전에 클릭한 행의 데이터를 덮어쓰게 되어 양식 수정 목적을 달성하게 됩니다. 확인을 클릭하면 ajax가 실행됩니다.
수정된 데이터를 백엔드로 보내고 데이터를 가져와서 데이터베이스를 업데이트합니다.

결과 페이지에 오류가 보고되지 않고 바로 크래시가 났습니다. 오랫동안 확인해보니 ajax의 데이터 매개변수가 잘못 쓰여져 있는 것을 발견했습니다.

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

에서 볼 수 있습니다. 위에서 data에 전달한 데이터는 String또는 이와 유사한 것이 아니라 n.fn.init [td, prevObject: n.fn.init(1), context: document],
due입니다. ajax에 대한 본인의 부주의와 오류에 대해서는 잘 몰라서 오랫동안 코드를 읽어보고야 원인을 알게 되었습니다. 처음에는 매개변수 때문이 아닌 줄 알았습니다.

마스터하셨을 거라 믿습니다. 이 기사의 사례를 읽은 후 방법을 알아보십시오. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

ES6에서 전체 화면 스크롤 플러그인을 구현하는 단계에 대한 자세한 설명

Vue에서 watch 사용 방법 요약

위 내용은 Ajax에서 데이터 매개변수 오류로 인한 페이지 충돌 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!