jquery AJAX 콜을 디버깅하려면 어떻게 해야 하나요?

jquery AJAX 콜을 디버깅하려면 어떻게 해야 하나요?

저는 Jquery와 AJAX가 협력하도록 노력하고 있습니다.지금까지의 큰 문제는 어디서 실수를 하고 있는지 알 수 없다는 것이었습니다.AJAX 콜을 디버깅하는 좋은 방법은 없습니다.

SQL 데이터베이스에 있는 권한 세트를 변경하는 기능 중 하나를 만들고 싶은 관리 페이지를 설정하려고 합니다..click 함수가 트리거되고 있는 것은 알고 있기 때문에 그 범위를 좁혔습니다만, AJAX 콜에서 SQL로의 체인의 어디에 문제가 있는지 알 수 없습니다.

내 .js 코드:

$('#ChangePermission').click(function(){
    $.ajax({
        url: 'change_permission.php',
        type: 'POST',
        data: {
        'user': document.GetElementById("user").value,
        'perm': document.GetElementById("perm").value
        }
    })
})

.disc 핸들러:

<?php  
require_once(functions.php);

echo $_POST["user"];

try{
    $DBH = mysql_start();

    $STH = $DBH->prepare("INSERT INTO people ( username, permissions ) values (?, ?)");

    $STH->bindParam(1, $_POST["user"]);
    $STH->bindParam(2, $_POST["perm"]);

    $STH->execute();
}
catch(PDOException $e){
    echo $e->getMessage;
}?>

여기서 mysql_start는 다른 SQL 콜에서 정상적으로 사용하는PDO 함수의 셋업입니다.

며칠 동안 튜토리얼을 조사하고 찾아봤는데 뭐가 잘못됐는지 아무리 생각해도 모르겠어요.에러가 발생하고 있는 장소를 특정하기 위해서 사용할 수 있는 툴이 있습니까?이 특정 문제에 대한 답변에 관심이 있는 것은 분명하지만 디버깅을 어디서부터 시작해야 할지 모르겠다는 것이 가장 큰 문제라고 생각합니다.도와주셔서 감사합니다!

다음과 같이 성공 콜백과 오류 콜백을 추가하여 JQuery 콜을 보다 견고하게 합니다.

 $('#ChangePermission').click(function() {
     $.ajax({
         url: 'change_permission.php',
         type: 'POST',
         data: {
             'user': document.GetElementById("user").value,
             'perm': document.GetElementById("perm").value
         },
         success: function(result) { //we got the response
             alert('Successfully called');
         },
         error: function(jqxhr, status, exception) {
             alert('Exception:', exception);
         }
     })
 })

거의 모든 최신 브라우저를 사용하여 네트워크 탭을 익혀야 합니다.AJAX 콜의 디버깅 방법에 대해서는, 이 SO 투고를 참조해 주세요.

브라우저(shift+ctrl+i) 또는 Firebug에서 "네트워크" 탭을 사용할 수 있습니다.
하지만 더 나은 해결책은 브라우저와 서버 간의 트래픽을 감시하고 캐치하기 위해 Fiddler와 같은 외부 프로그램을 사용하는 것입니다.

Mozilla Firefox라는 하는 것이 를 firebug.

페이지에서 f12 in mozilla를 누르면 firebug가 열립니다.

net과 이 에서는 firebug 탭으로 합니다.xhr5가지 선택지가 .xhr Params Headers Response HTML ★★★★★★★★★★★★★★★★★」Cookies

so so so so so so so so so soresponse ★★★★★★★★★★★★★★★★★」html아약스

무슨 문제가 있으면 알려주세요.

Firefox(FF) 확장으로서의 Firebug는 현재(2017년 1월 1일 현재) AJAX 호출에서 직접 javascript 응답을 디버깅하는 유일한 방법입니다.아쉽게도 개발이 중단되었습니다.또한 Firefox 50 이후 호환성 문제로 인해 Firebug를 설치할 수 없게 되었습니다:- (F 개발 도구 UI를 에뮬레이트하여 Firebug UI를 불러옵니다.

유감스럽게도 FF 네이티브 개발자 툴은 AJAX 호출에 의해 직접 반환된 javascript를 디버깅할 수 없습니다.크롬 개발 도구에도 동일하게 적용됩니다.

현재 프로젝트에서 XHR 호출에서 JS를 디버깅해야 하므로 이 문제로 인해 FF 업그레이드를 비활성화해야 합니다.여기서 좋은 소식은 아닙니다. JS 응답을 디버깅하는 기능이 FF/Chrome 개발자 도구에 곧 통합되기를 바랍니다.

Chrome 개발 도구로 2020년 대응

XHR 요청을 디버깅하려면:

1. Chrome DEV 도구 열기(F12)
2. 콘솔에서 Ajax URL을 마우스 오른쪽 버튼으로 클릭합니다.

GET 요청의 경우:

• 새 탭에서 열기를 클릭합니다.

POST 요청의 경우:

1. 네트워크 패널에서 표시를 클릭합니다.

2. [네트워크]패널:

   1. 당신의 요청을 클릭하세요.

   2. 자세한 내용을 보려면 응답 탭을 클릭하십시오.

이 jquery.success 설정을 확인하면 success 함수를 사용할 수 있습니다.

 $('#ChangePermission').click(function(){
    $.ajax({
        url: 'change_permission.php',
        type: 'POST',
        data: {
        'user': document.GetElementById("user").value,
        'perm': document.GetElementById("perm").value
        }
       success:function(result)//we got the response
       {
        //you can try to write alert(result) to see what is the response,this result variable will contains what you prints in the php page
       }
    })
})

error() 함수를 사용할 수도 있습니다.

이것이 너에게 도움이 되길 바란다.

Firebig 를 인스톨 하고, 에러가 발생하고 있는 장소를 확인합니다.또한 PHP에서 오류 메시지를 반환하기 위해 ajax 호출에 콜백을 설정할 수도 있습니다.예.

error: function(e){
     alert(e);
     }

jQuery를 로드한 후 코드 앞에 추가합니다.

$(window).ajaxComplete(function () {console.log('Ajax Complete'); });
$(window).ajaxError(function (data, textStatus, jqXHR) {console.log('Ajax Error');
    console.log('data: ' + data);
    console.log('textStatus: ' + textStatus);
        console.log('jqXHR: ' + jqXHR); });
$(window).ajaxSend(function () {console.log('Ajax Send'); });
$(window).ajaxStart(function () {console.log('Ajax Start'); });
$(window).ajaxStop(function () {console.log('Ajax Stop'); });
$(window).ajaxSuccess(function () {console.log('Ajax Success'); });

다음은 ajax 호출 후 javascript console.log에 php 오류를 디버깅하고 가져오기 위해 수행하는 작업입니다.

    $('#ChangePermission').click(function () {
    $.ajax({
        url: 'change_permission.php',
        type: 'POST',
        data: {
            'user': document.GetElementById("user").value,
            'perm': document.GetElementById("perm").value
        },
        success: function (data) {
            console.log(data);  
        },
        error: function (data) {
            console.log(data);
        }
    });
});

php측에서는 string concat에 반환되는 모든 에러와 php 에러메시지가 있는 경우 이를 포함한 json 부호화 응답으로서 에코하는 것으로 시작합니다.

<?php

error_reporting(E_ALL);
require_once(functions . php);
$result = "true";
$DBH = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
$DBH->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$STH = $DBH->prepare("INSERT INTO people ( username, permissions ) values (?, ?)");

if (isset($_POST["user"]) && isset($_POST["perm"])) {
    $STH->bindParam(1, $_POST["user"], PDO::PARAM_STR);
    $STH->bindParam(2, $_POST["perm"], PDO::PARAM_STR);
}
try {
    $STH->execute();
} catch (PDOException $e) {
    $result .= $e->getMessage;
}
echo json_encode($result);
?>

언급URL : https://stackoverflow.com/questions/21897398/how-do-i-debug-jquery-ajax-calls