jQuery의 ajax 성공 처리기에서 응답 데이터의 유효성을 검사해야합니까?

Question

게시 AJAX 호출이 있다고 가정하고 반환 된 데이터를 일부 HTML 요소에 넣을 수 있습니다.

$.post(settings.url, function(data) { 
    $('#someElement').text(data.someData1); 
    $('#someElement2').text(data.someData2); 
}); 

나는 백 엔드 개발자입니다 그리고 내가 사용자로부터 오는 데이터의 조각의 서버 측 유효성 검사를 할 필요가 있다고 나를 위해 자연입니다. 반대 상황이긴하지만 위의 코드는 나에게 조금 잘못되었습니다 (외부의 데이터는 유효하지 않음). 그러나 다른 한편으로는, 내가 서버에서 무엇을 반환하는지 알고 있습니다. 이 경우

문제는 잘 백 엔드 응용 프로그램 구조를 예상 한 것 data이 (내도)에서 반환하는 신뢰, 또는 내가 서버를 들어오는 모든 데이터를 어떻게 든 확인해야합니까?

추가 유효성 검사를 수행하는 좋은 방법이 있습니까? 모든 데이터 조각의 수동 유효성 검사는 목에 통증이있는 ​​것 같습니다. 특히 더 복잡한 데이터 구조.

이 질문을 쓰는 동안 아이디어가 내 마음에 들었습니다. 모듈/플러그인을 작성하는 동안 기본 옵션 설정에 일반적으로 사용되는 것처럼 $.extend()을 사용할 수 있습니다.

$.post(settings.url, function(data) { 
    var trustedStructure = $.extend({ 
     someData1: $('#someElement').text(), 
     someData2: $('#someElement2').text(), 
    }, data); 

    $('#someElement').text(trustedStructure .someData1); 
    $('#someElement2').text(trustedStructure .someData2); 
}); 

내가 기본 또는 내가 원하는 경우 다른 같은 추가 현재 데이터와 신뢰할 수있는 데이터를 가질 수있는 방법 : 비슷해.

편집 : 잊어 버렸습니다. 순수한 JSON 데이터 응답에 대해 이야기하고 있습니다. HTML 등은 포함되어 있지 않습니다.

Answer 1

서버에서 반환 된 데이터에 DOM 요소가 포함되어 있습니까? 그렇지 않은 및 순수 텍스트 반환하는 경우

, 당신은 다음과 같이 들어오는 데이터를 구문 분석 할 textarea 사용할 수 있습니다 : 그냥 그것을 밖으로 시도

var textArea = document.createElement('textarea'); 
textArea.innerHTML = data; 
data = textArea.textContent; 

을하고 서버가 보낼 수 일부 <p>, <img> 또는 <script> 요소

Answer 2

일반적으로 이전에 말한 것처럼 응답 데이터의 유효성을 검사하지 않으면 데이터가 자체 백엔드에서 반환됩니다. 정말로해야 할 일은 서버에서 오는 정보로 예외 또는 오류를 처리 할 수있는 적절한 방법을 확보하는 것입니다.

서버에서 예외를 반환하는 경우 오류가 있는지 여부를 파악하기 위해 클라이언트 쪽에서해야합니다.

즉Rest API처럼 특정 코드를 반환하거나이 같은 JSON 구조를 갖는 사용할 때

$.ajax({ 
    ... 
    success: function(response) { 
     if (response.error) { 
      alert(response.error.message); 
     } else { 
      document.querySelector('#field').value = response.data.text; 
     } 
    } 
}); 

HTML 응답 코드가 유용합니다

// Success 
{ 
    "error": false, 
    "data": { 
     ... 
    } 
} 
// Exception 
{ 
    "error": true, 
    "message": "Username already taken", 
    "type": "warning" 
} 

을 당신은 항상 200 OK 상태 코드를 반환하는 경우 promises, 당신은 기본 흐름 (성공, 완료)에 대한 200 OK를 반환 할 수 있습니다 4XX 또는 5XX 경우 뭔가 특별한 happe n (실패) :

$.ajax({ 
    url: 'example.php', 
    ... 
}) 
.done(function(response) { alert(response.data); })  
.fail(function(error) { alert(error.message); })  
.always(function() { clearFields(); });