양식 제출/iframe없이 JavaScript로 HTML 가져 오기?

Question

컨텍스트 : 나는 웹 응용 프로그램에서 종이 보고서를 필사하는 학생의 작업을합니다. 그것은 오래되었고 유감스럽게도 원본을 변경하거나 DB 쿼리를 직접 실행할 수 없습니다.

전체 양식을 제출하고 나면 고유 ID가 존재하는지 확인하고 완전히 채워지지 않으면 제출할 수 없습니다. 말할 필요도없이, 모든 것을 복제하여 복제본이라는 것을 깨닫기 만하면 시간 낭비가됩니다.

목적 : 은 그 아래 userscript가 어떤 경기 (행)와이있는 경우, 검사 따라 반환 고유 ID의 입력의에 onblur (noReferenceDeclarant)에서 검색 검색 시작했다. Greasemonkey로 실행됩니다. 검색 양식은 동일한 도메인의 다른 페이지에 있습니다. 검색 양식에는 URL 인수가 없습니다.

이 iframe을 사용하지 않고 수행 할 수 있습니다 (아마도 AJAX를?) 이 동시에 JS를 배울 수있는 내 자신의 생산성 &위한 도구입니다. 필자는 아직 초보자이므로 코드 작성자를위한 팁은 언제나 환영합니다.

//Adding function to input's blur event 
$(document).on ("blur", "#noReferenceDeclarant", isRefNumberExists); 

//Vars 
var noReferenceDeclarant = ''; 
var loadCode = 0; 
var $searchForm; 

//Fonctions 
function isRefNumberExists() 
{ 
    noReferenceDeclarant = $('#noReferenceDeclarant').val(); 
    loadCode = 0; 

    //Make sure there's data in the input before proceeding 
    if (noReferenceDeclarant) 
    { 
      //Build search iframe 
      $searchForm = $('<iframe />', { 
       name: 'searchWindow', 
       src: 'rechercherGriIntranet.do?methode=presenterRechercher', 
       id: 'searchWindow', 
       width: 0, 
       height: 0   
      }).appendTo('body'); 

      $searchForm.load(searchRefNumber); 
    } 
} 

function searchRefNumber() 
{ 
    var isExists = false; 

    //Check which "load" it is to avoid submit loops 
    if (loadCode === 0) 
    { 
     loadCode = 1; 

     //Filling search form with search term 
     $(this.contentDocument).find('#noReference').val(noReferenceDeclarant); 

     //Set search form preferences 
     $(this.contentDocument).find('#typeRapportAss').prop('checked', false); 
     $(this.contentDocument).find('#typeRapportAS').prop('checked', false); 
     $(this.contentDocument).find('#typeRapportSI').prop('checked', true); 
     //Submit the form 
     $(this.contentDocument).find('form:first').submit(); 
    } 
    else if (loadCode === 1) 
    { 
     loadCode = 2; 

     //See if there are any tr in the result table. If there are no results, there a thead but no tr. 
     var foundReports = $(this.contentDocument).find('.resultatRecherche tr').length; 

     if (foundReports > 0) 
     { 
      if (confirm('A report matching this ID already exists. Do you want to display it?')) 
      { 
       //Modal window loading the report in an iframe. Not done yet but that's fairly straightforward. 
      } 
      else 
      { 
       //Close and return to the form. 
      } 
     } 

    } 

    //Reset variables/clean ressources 
    delete $searchForm; 
    $('#dateRedactionRapport').focus(); 

} 

Answer 1

전반적으로 나는 훨씬 더 나쁜 코드를 보았습니다.

Ajax 그런 다음, AJAX 응답을 DOM에 삽입해야합니다 (대부분 iframe으로).

이 경우 나는 접근 방식을 유지할 것입니다. 제 생각에는 그것이 sanest입니다 .j

전체 컨텍스트가 없으면 loadCode를 정리할 수있는 방법이있을 수 있습니다.하지만 가지고있는 것은 동일하며 작동합니다. 많은 사람들이 그것을 semaphore이라고 부르지 만, 이는 단지 용어의 문제 일뿐입니다.

당신이 jQuery를 데이터 구조로 재생하고 싶다면, 당신이 '설정'개체를 만들 수

// Many folks recommend that jQuery variables be named $<something> 
var $doc = $(this.contentDocument); 


doc.find('#typeRapportAss').prop('checked', false); 
$doc.find('#typeRapportAS').prop('checked', false); 
$doc.find('#typeRapportSI').prop('checked', true); 

나는 "정말 너무 자주 jQuery 오브젝트를 호출하지 않는 것이 좋습니다되는 청소 거라고 유일한 것은 .. 그 다음과 같습니다.

var formValues = { 
    typeRapportAs: false, 
    typeRapportAS: false, 
    typeRapportSI: true 
}; 

다음 반복이이 프로젝트에 필요하지 않은 (.hasOwnProperty와 for ... in를 사용)에

, 무엇을 당신은 잘하고 있습니다,하지만 그것은 학습 운동을 할 수 있습니다.