2

フォームがあり、その結果を div にロードしたいと考えています。私はすでにこれに関するいくつかのトピックを検索しましたが、この1つのjquery送信フォームと既存の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 )の結果を に表示したいと思います<div id="test">。現在、私はこれを iframe 内で行っていますが、それは「プロフェッショナル」に見えません。知らされていない場合でも、十分な情報を提供したことを願っています。

4

1 に答える 1

1

最も重要なことは、Web ページがhttp://wl.breedbandwinkel.nl内から実行されていない場合、ほとんどのブラウザーでクロスサイト スクリプティングが無効になっているため、AJAX 呼び出しがまったく実行されない可能性があることです。bar.com から提供されたページから foo.com に AJAX 要求を行うことはできません。これを回避するために、私は通常、「bar.com/ajaxActions.php」などのファイルを作成し、その PHP スクリプトを使用して外部サイトへの GET または POST 要求を行います。結果を取得したら、その結果を標準出力に出力するだけです。これが AJAX 要求の結果になります。

もう 1 つの方法は、タグ内の「メソッド」属性と「アクション」属性を捨てて、<form>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 を使用できない場合は、選択したバックエンド言語を使用してください。PHP では、ポスト コード チェッカーが GET リクエストを受け入れたと仮定すると、ajaxActions.php ファイルは次のようになります。

$response = file_get_contents("http://wl.breedbandwinkel.nl/postcodecheck?pcg=" . $_GET["pcg"] . "&pcl=" . $_GET["pcl"] . "&hn=" . $_GET["hn"] );
print $reponse;
于 2012-11-01T04:39:13.390 に答える