0

私formのサイトには、送信時にユーザーをからPage1.htmlに移動するがありますPage2.html。

送信中のフォームと「Page2loading」の間にメッセージを表示したいのですが。

誰かが私にこの例を教えてもらえますか？

4

2 に答える 2

1

フォームがajaxを介してデータを送信する場合は、次のことを試すことができます。

$('form#myform').submit(function(e) {
   e.preventDefault();
   $('#message').html('Sending....');  // #message may be a div that contains msg
   $ajax({
     url: 'url_to_script',
     data: 'your_data',
     success: function(res) {
       // when submit data successfully then page reload
       window.location = 'page2.html'
     }
   });
});
于 2012-05-22T16:59:06.057 に答える
1

あなたがやろうとしていることは、標準的なフォームの提出ではできません。

ajaxを使用してフォームを送信し、応答を待っている間、「お待ちください」というメッセージを表示することをお勧めします。応答が受信され、OKであることが検証されたら、ユーザーを現在page2と呼んでいるページにリダイレクトできます。

ajaxを介してフォームを送信する最も簡単な方法は、フォームを文字列にシリアル化して渡すことです。次に、受信したデータを処理し、OKまたはERRを返すページが必要になります。

その後、JSは次のアクションを解読する必要があります。

これはテストされていませんが、さまざまな作業プロジェクトからコピーして貼り付けています。プロジェクトをダウンロードして含める必要があります。json2.js

ページ1

<div id='pleaseWait'>Please Wait...</div>
<form id="theForm" onsubmit="doAjaxSubmit();">
    <input type='text' name='age' id='age' />
    <input type='submit' value='submit'>
</form>

<script type="text/javascript">
    function doAjaxSubmit(){
        var j = JSON.stringify($('#theForm').serializeObject());

        $('#pleaseWait').slideDown('fast');
        $.post('processor.php?j=' + encodeURIComponent(j), function(obj){
            if(obj.status=='OK'){
                window.location='page2.php';
            }else{
                $('#pleaseWait').slideUp('fast');
                alert('Error: ' + obj.msg);
            }
        }, 'json');
        return(false);
    }    


    $.fn.serializeObject = function(){
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
</script>

Processor.php

<?php

    $j=json_decode($_POST['j'], true);


    if ((int)$j['age']<=0 || (int)$j['age']>120){
       $result = array('status'=>'ERR', 'msg'=>'Please Enter Age');
    }else{
        //Do stuff with the data. Calculate, write to database, etc.
        $result = array('status'=>'OK');
    }
    die(json_encode($result));
?>

これは基本的に以下の回答（by）と非常に似ています@thecodeparadoxが、私の例では、データオブジェクトを手動で作成せずに全体を渡す方法、PHP側で検証する方法、および適切なJSONデータをいずれかに返す方法を示しています。ユーザーをリダイレクトするか、エラーを表示し、アニメーションを使用してメッセージを表示します。

于 2012-05-22T17:00:05.217 に答える