JQueryとAJAXを使用した複数のGETリクエスト

Question

ここではJQuery AJAXの新機能が新しくなりました。私はこれについての答えを探していましたが、答えを見つけることはできません。

私はユーザーが記入するフォームを持っています。一度記入したら、記入してください。これはaspページへのajax呼び出しを開始し、基本的に入力された情報を表示し、ユーザーフォームをフェードアウトします。下の確認ボタンを押すと、ユーザーを別の.aspページに移動させ、データベースに格納してチケット番号を指定します。

私の問題は、2回目の呼び出し（入力を行うページ）では、取得が2回起こっていることをFirebugに通知することです。私はaspページだけを試してみると、それは私の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 

Answer 1

まず第一には、フィールドが記入されているかどうかを確認するためのより良い方法は、jQueryの$.trim()を使用することで、それは誰かが空白の束に入るので、もし、それがする最初と最後にすべての空白をトリムしますまだ偽を返します。これは、あなたがそれを行うだろうかです：

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

、これは、それが空であるかどうかを確認するためのより良い方法ですが、さらに良いアイデアは、あなたが簡単なプットclass="required"、class="required email"を可能な、jQuery Validation pluginを使用することです（もしあなたが好きならjavascriptで定義することもできます）。

また、.loadを使用しています。 $.getというものが存在することを知っていますか？ get要求を送信するためのもう少し強力な方法であり、それを動作させるために要素にロードする必要はありません（$.postもあります）。 $.getと$.postが発見されるまで、私はいつも.loadを使っていました。あなたの質問に今、とにかく

$.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のような他のブラウザで試しましたか？

Answer 2

私は今日のフォーラムから回答を得ました。答えはどこにあるのか覚えていません....

私はfadeOutに2つのセレクタを持っています。各セレクタに対してload関数を2回呼び出していました。それを変更し、今私は1つのGET要求を取得しています。すべての助けをありがとう！ :)ハッピーコーディング！