2

現在、http: //jsfiddle.net/xSkgH/47/にある複数ステップのクエリ フォームに取り組んでいます。

jQuery AJAX (process.php が処理を処理します) を介して変数を送信し、 resultと呼ばれる process.php の div を使用して最後のステップでdiv を更新しようとしています。どうすればこれを達成できますか？

これまでのところ、malsup (http://jquery.malsup.com/form/) による jQuery フォーム プラグインを使用してこれを達成できましたが、厳密な仕様の一部としてそれを達成するために jQuery AJAX メソッドを使用する必要があります。

これは私が使用していたコードです（jQueryフォームプラグインを使用）：

// prepare the form when the DOM is ready 

$(document).ready(function() { 
var options = { 
    target:        '#result',  
    beforeSubmit:  showRequest,  
    success:       showResponse   
}; 

// bind to the form's submit event 

$('#task5_booking').submit(function() { 
    $(this).ajaxSubmit(options); 
    return false; 
    }); 
});  

// pre-submit callback 

function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    // alert('About to submit: \n\n' + queryString); 
}

// post-submit callback 

function showResponse(responseText, statusText, xhr, $form)  {
    $('#last-step').fadeOut(300, function() {
    $('#result').html(responseText).fadeIn(300);
    });
}

どうもありがとう！

4

2 に答える 2

2

jQuery.ajax最後のステップを処理するために使用します。

http://api.jquery.com/jQuery.ajax/

   else if (whichStep == 'last-step') {
        $.ajax( {
            url:'urltophp.php',
            data: {}, // your data
            dataType: 'json', //your datatype
            type: 'POST',   //or GET
            success: function(r) {
                //your callback here...
            }
        });
    }

編集：

$('#task5_booking').submit(function(e) { 
    $(e).preventDefault();  //prevent the default form submit()

    var formData = $(this).serialize(); //serialize the form fields data...


    $.ajax( {
        url:'urltophp.php',
        data: formData, // your data
        dataType: 'json', //your datatype
        type: 'POST',   //or GET
        success: showResponse
    });

    //$(this).ajaxSubmit(options); 
    //return false; 
    //}); 
});

これを変える：

function showResponse(responseText, statusText, xhr, $form)  {
    $('#last-step').fadeOut(300, function() {
    $('#result').html(responseText).fadeIn(300);
    });
}

これに：

function showResponse(responseText)  {
    $('#last-step').fadeOut(300, function() {
        $('#result').html(responseText).fadeIn(300);
    });
}
于 2012-04-16T14:08:01.673 に答える
1

http://api.jquery.com/load/を使用します。.ajax を使用するのと同じように、より簡単で要件に適合します。

$('#last-step').load(url, data, function(){})post リクエストを送信し、「last-step」の html コンテンツに、応答 html に出力された URL を入力します。

于 2012-04-16T14:15:15.573 に答える