1

ここでJQuery AJAXを初めて使用します。私はこれについてしばらく答えを探していましたが、答えが見つかりません。

ユーザーが記入するフォームがあります。入力したら、送信をクリックします。これにより、ASP ページへの ajax 呼び出しが開始され、基本的には入力された情報が表示され、ユーザー フォームがフェードアウトします。その下の確認ボタンをクリックすると、別の .asp ページにユーザーが移動し、データベースに入れられてチケット番号が与えられます。

私の問題は、2 番目の呼び出し (入力を行うページ) で、get が 2 回発生していることに firebug で気付くことです。aspページを単独で試してみると、入力が1回しか行われないため、SQLコードではありません。2 番目の .asp ページを最初のページに切り替えると、正常に動作します。

これが私のjqueryです。コメントをお待ちしております。ありがとう

 $('#submit').click(function (event){
event.preventDefault(); // DECLARE EVENT IN THE CLICK FUNCTION

//Get the data from all the fields 
var posting = 'no';
var firstname = $('input[name="firstname"]');
var lastname = $('input[name="lastname"]');
var phone = $('input[name="phone"]');
var email = $('input[name="email"]');
var family_size = $('select[name="family_size"]');
var date_3 = $("#date3");
var date_4 = $("#date4");
var book_option = $('input[name=book_option]:radio:checked');
var payment_type = $('input[name=payment_type]:radio:checked');
var comments = $('textarea[name="comments"]');

if (firstname.val()=='') { 
       firstname.addClass('fn_error');
       firstname.focus(); 
       return false;       
} else 
    firstname.removeClass('fn_error');

if (lastname.val()=='') {
       lastname.addClass('ln_error');
       lastname.focus();
       return false;       
} else 
    lastname.removeClass('ln_error');

if (phone.val()=='') {
       phone.addClass('fn_error');
       phone.focus();
       return false;       
} else 
    phone.removeClass('fn_error');

if (email.val()=='') { 
      email.addClass('ln_error');
      email.focus();
      return false;        
} else 
    email.removeClass('ln_error');

// TEST FOR VALID EMAIL
var email_pattern=new RegExp("^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$");
var email_result = email_pattern.test(email.val());
if( email_result == true ) {
    email.removeClass('fn_error');
}else{
    email.addClass('fn_error');
    email.focus();
    return false;
}

// TEST FOR VALID PHONE NUMBER
var phone_pattern= 
    new RegExp("^(\\(?\\d\\d\\d\\)?)?( |-|\\.)?\\d\\d\\d( |-|\\.)?\\d{4,4}(( |-|\\.)?[ext\\.]+ ?\\d+)?$");
var phone_result = phone_pattern.test(phone.val());
if( phone_result == true ) {
    phone.removeClass('fn_error');
}else{
    phone.addClass('fn_error');
    phone.focus();
    return false;
}

var dataString= 'firstname=' + firstname.val() + '&lastname=' + lastname.val() + '&phone=' + phone.val() + '&email=' + email.val() + '&family_size=' + family_size.val() + '&date3=' + date_3.val() + '&date4=' + date_4.val() + '&book_option=' + book_option.val() + '&payment_type=' + payment_type.val() + '&comments=' + comments.val() + '&posting=' + posting;

//alert(dataString);  
$('#ticketform').fadeOut('slow', function() {
    $('#testdiv').load('../resources/confirm_ticket.asp', dataString, function() {
        $('#generateform').fadeIn('slow');
        $('#submit').unbind('click');
    });

}); // LOAD CLOSE
}); // SUBMIT CLICK FUNCTION CLOSE

$('#gen').click(function (event){
event.preventDefault(); // DECLARE EVENT IN THE CLICK FUNCTION

var firstname = $('input[name="firstname"]');
var lastname = $('input[name="lastname"]');
var phone = $('input[name="phone"]');
var email = $('input[name="email"]');
var family_size = $('select[name="family_size"]');
var date_3 = $("#date3");
var date_4 = $("#date4");
var book_option = $('input[name=book_option]:radio:checked');
var payment_type = $('input[name=payment_type]:radio:checked');
var comments = $('textarea[name="comments"]');

var dataString= 'firstname=' + firstname.val() + '&lastname=' + lastname.val() + '&phone=' + phone.val() + '&email=' + email.val() + '&family_size=' + family_size.val() + '&date3=' + date_3.val() + '&date4=' + date_4.val() + '&book_option=' + book_option.val() + '&payment_type=' + payment_type.val() + '&comments=' + comments.val();

alert(dataString);  
$('#testdiv, #generateform').fadeOut('slow', function() {
    $('#message').load('../resources/generate_ticket.asp', function() {
        $('#message').fadeIn('slow'); 
    });

}); // LOAD CLOSE

   }); // SUBMIT2 CLICK FUNCTION CLOSE
4

2 に答える 2

1

今日フォーラムから回答がありました。どこか思い出せませんが答えは…

$('#testdiv, #generateform').fadeOut('slow', function() {
$('#message').load('../resources/generate_ticket.asp', function() {
    $('#message').fadeIn('slow'); 
});

フェードアウトには 2 つのセレクターがあります。セレクターごとに load 関数を 2 回呼び出していました。それを変更したところ、GET リクエストが 1 つしか取得されなくなりました。助けてくれてありがとう！:) ハッピーコーディング！

于 2012-04-22T03:05:50.887 に答える
1

最初に、フィールドが入力されているかどうかを確認するより良い方法は、 jQuery を使用する$.trim()ことです。最初と最後にすべての空白が削除されるため、誰かが大量の空白を入力すると、まだ false が返されます。これはあなたがそれを行う方法です：

if ($.trim(firstname.val())) { 
       firstname.addClass('fn_error');
       firstname.focus(); 
       return false;       
}

これは、それが空かどうかを確認するためのはるかに優れた方法ですが、さらに良いアイデアは、jQuery Validation プラグインを使用することです。このプラグインでは、各ルールに対して単純に put class="required"、class="required email"などを使用できます (必要な場合は、javascript で定義することもできます)。好む）。

また、使い続けているようですね.load。$.getというものが存在することをご存知ですか？これは get リクエストを送信するためのもう少し強力な方法であり、それを機能させるためにエレメントにロードする必要はありません ( もあります$.post)。と.loadを発見するまで、私はずっと自分自身を使っていました。これはあなたのコードの例です:$.get$.post

$.get('../resources/confirm_ticket.asp', dataString, function(data) { // data is what is returned from the request (html, etc.)
        $('#generateform').fadeIn('slow');
        $('#submit').unbind('click');
});

とにかく、今あなたの質問に。

なぜそうするのかという問題は見当たりませんが、ブラウザのバグか何かである可能性があります（通常はそうではありませんが、これは以前にも発生し、修正方法がわかりませんでした）。Google Chrome や Safari などの他のブラウザで試してみましたか?

于 2012-04-21T03:03:59.907 に答える