div 안에 폼 액션로드하기

Question

폼이 있고 그 결과를 div에로드하려고합니다. 나는 이미 이것에 대한 몇 가지 주제를 검색했습니다. 그리고 나는이 하나가 작동한다고 생각했지만 그럴 수는 없습니다.

이 내 코드는 지금까지 있습니다 :

<script type="text/javascript"> $('#form').submit(function() { // catch the form's submit event 
$.ajax({ // create an AJAX call... 
    data: $(this).serialize(), // get the form data 
    type: $(this).attr('method'), // GET or POST 
    url: $(this).attr('action'), // the file to call 
    success: function(response) { // on success.. 
     $('#test').html(response); // update the DIV 
    } 
}); 
return false; // cancel original event to prevent form submitting }); </script> 

<DIV id="test"></DIV> 

<FORM id="form" name="pcc" method="post" action="http://wl.breedbandwinkel.nl/postcodecheck" onSubmit="return validatePcc(this);"> 
      <div class="one_third firstcols"> 
       <H4>Ik ben op zoek naar:</H4> 

     <DIV class="ff"><INPUT type="radio" class="pccrad radio" name="sub" value="alles-in-een-pakketten" id="pcc-alles-in-een-pakketten" onclick="$('#pcc-no').hide(); $('#pcc-fpcon').css('visibility', 'visible'); if($('#pcg').val() == '') $('#pcg').focus();"><LABEL class="left pcm" for="pcc-alles-in-een-pakketten" onmouseover="mpopup('Alles-in-&eacute;&eacute;n pakketten','Extra voordelig pakket met internet, digitale telefonie en/of digitale televisie.');" onmouseout="kill();">Alles-in-&eacute;&eacute;n pakketten</LABEL></DIV>   <DIV class="ff"><INPUT type="radio" class="pccrad radio" name="sub" value="internet" id="pcc-internet" onclick="$('#pcc-no').hide(); $('#pcc-fpcon').css('visibility', 'visible'); if($('#pcg').val() == '') $('#pcg').focus();"><LABEL class="left pcm" for="pcc-internet" onmouseover="mpopup('Internet','Altijd supersnel onbeperkt online tegen een vast bedrag per maand.');" onmouseout="kill();">Internet</LABEL></DIV>      <DIV class="ff"><INPUT type="radio" class="pccrad radio" name="sub" value="digitale-televisie" id="pcc-digitale-televisie" onclick="$('#pcc-no').hide(); $('#pcc-fpcon').css('visibility', 'visible'); if($('#pcg').val() == '') $('#pcg').focus();"><LABEL class="left pcm" for="pcc-digitale-televisie" onmouseover="mpopup('Digitale Televisie','Geniet van haarscherp digitaal beeld en geluid inclusief de gratis digitale programmagids.');" onmouseout="kill();">Digitale Televisie</LABEL></DIV> 
      </div><!-- end .one_third --> 
      <div class="one_third"> 
       <H4>Mijn postcode en huisnummer zijn:</H4> 

      <TABLE border="0" cellspacing="0" cellpadding="0"> 
       <TR> 
       <TD height="14" colspan="2">Postcode</TD> 
       <TD>Huisnr.</TD> 
       </TR> 
       <TR> 
       <TD width="51"><INPUT type="text" class="text" maxlength="4" size="5" value="" name="pcg" id="pcg" onKeyUp="autoTab(event,this,4,pcl);" onFocus="chBg(pcc,'pcg');" onBlur="chBg(pcc,'reset');" style="width: 41px;"></TD> 
       <TD width="46"><INPUT type="text" class="text" maxlength="2" size="2" value="" name="pcl" id="pcl" onKeyUp="autoTab(event,this,2,hn);" onKeyDown="backSpace(event,this,pcg);" onFocus="chBg(pcc,'pcl');" onBlur="chBg(pcc,'reset'); upperCase(event,this);" style="width: 26px;"></TD> 
       <TD width="36"><INPUT type="text" class="text" maxlength="6" size="4" value="" name="hn" id="hn" onKeyDown="backSpace(event,this,pcl);" onFocus="chBg(pcc,'hn');" onBlur="chBg(pcc,'reset');" style="width: 36px;"></TD> 
       </TR> 
      </TABLE> 

      <U class="dot small" onmouseover="popup('Waarom mijn postcode invullen?','Om te kunnen controleren welke abonnementen op uw adres leverbaar zijn hebben wij uw postcode en huisnummer nodig.<br>Uiteraard respecteren wij uw privacy. Deze gegevens worden niet opgeslagen.');" onmouseout="kill();"> 
      Waarom mijn postcode invullen?</U> 
      </div><!-- end .one_third --> 
      <div class="one_third lastcols"> 
       <INPUT type="submit" name="submit" value="Vergelijk de aanbiedingen op uw adres" class="button"> 
      </div><!-- end .one_third --> 
      </FORM> 

그래서 나는이 작동하지 않는 것을 알아 냈어. 액션 URL ( http://wl.breedbandwinkel.nl/postcodecheck)의 결과를 에 표시하고 싶습니다. 현재 iframe 내에서이 작업을 수행하고 있지만 '전문가'모양이 아닙니다. 나는 알지 못하면 충분한 정보를 주었으면 좋겠다.

Answer 1

가장 중요한 점은 웹 페이지가 http://wl.breedbandwinkel.nl에서 실행되지 않는 경우 대부분의 모든 브라우저에서 크로스 사이트 스크립팅을 사용하지 않기 때문에 AJAX 호출이 전혀 실행되지 않습니다. bar.com에서 제공되는 페이지에서 foo.com에 대한 AJAX 요청을 할 수 없습니다. 이것을 피하기 위해, 내가 일반적으로하는 일은 "bar.com/ajaxActions.php"와 같은 파일을 작성한 다음 PHP 스크립트를 사용하여 GET 또는 POST 요청을 외부 사이트에 작성하는 것입니다. 결과를 검색하고 나면 해당 결과를 표준 출력으로 인쇄 한 다음 AJAX 요청의 결과가됩니다.

내가 할 다른 것은 <form> 태그의 "method"와 "action"속성을 도려내 jQuery로 작성하려는 AJAX 요청에 넣는 것입니다. 같은 대신 제출 버튼에 onclick을() 수신기를 사용하여 다음

<INPUT type="submit" name="submit" onClick="doAjaxRequest()" value="Vergelijk de aanbiedingen op uw adres" class="button"> 

을 그 기능에 우선 자리에 당신이 이미 가지고 코드를 사용 :

<script type="text/javascript"> 
function doAjaxRequest() { 
    $.ajax({ // create an AJAX call... 
     data: $("#form").serialize(), // get the form data 
     type: GET, // GET or POST 
     url: "ajaxActions.php", // the file to call -- postcodecheck if you're on that same domain, otherwise ajaxActions.php 
     success: function(response) { // on success.. 
      $('#test').html(response); // update the DIV 
     } 
    }); 
} 

마지막으로, 만약 ' 동일한 도메인에 있지 않다면 GET 요청 (file_get_contents() 사용) 또는 POST 요청 (cURL 사용)에 대한 PHP 코드를 찾으십시오. 또는 PHP를 사용할 수없는 경우 선택한 백엔드 언어를 사용하십시오.

이

$response = file_get_contents("http://wl.breedbandwinkel.nl/postcodecheck?pcg=" . $_GET["pcg"] . "&pcl=" . $_GET["pcl"] . "&hn=" . $_GET["hn"]); 
print $reponse;