0

新しいページの読み込みを防ぐために、ajax またはその他の方法を使用して、result.php の結果をウェルカム div に取得するにはどうすればよいですか?

    <div id="welcome">
                    <form action="result.php" method="post">
                        <input type="hidden" id="date" name="selected"/>

                        <select id="city" class="cities" data-role="none" name="City">
                            <option value="">Anyplace</option>
                            .
                            .
                            .
                        </select>
                        <select id="type" class="cities" data-role="none" name="Event">
                            <option value="">Anything</option>
                           .
                           .
                           .
                        </select>                   
                    <input type="submit" class="button" value="Ok Go!"/>
        <input id="current" name="current" type="hidden"/>​
                </form>
    </div>
4

3 に答える 3

1

AJAX を使用してこれを行う場合、<form>コードは必要ありません。コードは、<form>別のページに投稿していて、とにかくビューが変更/更新されることを期待している場合にのみ役立ちます。

また、<form>この例のコードを使用すると、「非表示フィールド CURRENT の値を設定する」ボタンを使用して、追加ビットのページが更新されます (jQuery によって挿入された値が失われます)。実際のアプリで問題になる可能性が高いというわけではありませんが、参考までに.

Ajax を JavaScript コードに入れると、次のようになります。

$('#mySelect').change(function() {
    var sel = $(this).val();
    //alert('You picked: ' + sel);

    $.ajax({
        type: "POST",
        url: "your_php_file.php",
        data: 'theOption=' + sel,
        success: function(whatigot) {
            alert('Server-side response: ' + whatigot);
        } //END success fn
    }); //END $.ajax
}); //END dropdown change event

PHP ファイルからECHOされたデータは、AJAX 呼び出しの成功関数で HTML ドキュメントに入り、そこで処理する必要があることに注意してください。そこで、受け取ったデータを DOM に挿入します。

たとえば、HTML ドキュメントにid="myDiv". PHP からのデータを HTML ドキュメントに挿入するには、行:alert('Server-side response: ' + whatigot);を次のように置き換えます。

$('#myDiv').html(whatIgot);

プレスト！DIV には、PHP ファイルからエコーされたデータが含まれています。

これは、AJAX を使用した独自の例の実用的なソリューションです。

HTML マークアップ:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                $('#mybutt').on('click', function(e){
                    e.preventDefault(); //prevent default action
                    var ct = $('#city').val();
                    var dt = $('#date').val()
                    var ty = $('#type').val();
                    var curr = $('#current').val();
                    $.ajax({
                        url: 'result.php',
                        type: 'POST',
                        data: 'ct=' +ct+ '&dat=' +dt+ '&t=' +ty+ '&curr=' +curr,
                        success: function(response){
                            $('#welcome').html(response);
                        }
                    });
                });

                $('#mycurr').click(function(){
                    var resp = prompt("Please type something:","Your name");
                    $('#current').val(resp);
                });


            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="welcome">
        <input type="hidden" id="date" name="selected"/>

        <select id="city" class="cities" data-role="none" name="City">
            <option value="sumwhere">Anyplace</option>
            <option value="anutherwhere">Another place</option>
        </select>
        <select id="type" class="cities" data-role="none" name="Event">
            <option value="sumthing">Anything</option>
            <option value="anutherthing">Another thing</option>
        </select>                   
        <input type="submit" id="mybutt" class="button" value="Ok Go!"/>
        <input type="submit" id="mycurr" class="button" value="Set value for hidden field CURRENT"/>
        <input id="current" name="current" type="hidden"/>
    </div>


</body>
</html>

PHP プロセッサ ファイル: result.php

$ct = $_POST['ct'];
$date = $_POST['dat'];
$typ = $_POST['t'];
$cu = $_POST['curr'];

if ($date == '') {
    $date = 'Some other date';
}

$r = '<h1>Results sent from PHP</h1>';

$r .= 'Selected city is: [' .$ct. ']<br />';
$r .= 'Selected date is: [' .$date. ']<br />';
$r .= 'Selected type is: [' .$typ. ']<br />';
$r .= 'Hidden field #CURRENT is: [' .$cu. ']<br />';

$r .= '<h2>And that\'s all she wrote....</h2>';

echo $r;
于 2013-07-22T17:42:51.247 に答える
1

valitは、ページをリロードさせるaction="result.php"です。

フォームに id を与えようとし、単純な ajax 呼び出しを使用する必要があります。

$("#formId").submit(function() {
    $.ajax({
        url: 'result.php',
        success: function(response) {
            $("#welcome").setValue(response); // update the DIV
        }
    });
    return false; // prevent form submitting
});

乾杯

于 2013-07-22T15:30:59.070 に答える