페이지 충돌을 일으키는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue 프로젝트에서 Vux를 사용하는 방법

Vue에서 슬롯을 사용하여 상위 구성 요소를 배포하는 방법

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