javascript - 使用 JQuery 和 AJAX 的多个 GET 请求

Question

这里是 JQuery AJAX 的新手。一段时间以来，我一直在寻找答案，但找不到答案。

我有一个用户会填写的表格。填好后点击提交。这将启动对 asp 页面的 ajax 调用，基本上只显示输入的信息并淡出用户表单。下面的确认按钮将用户带到另一个 .asp 页面，该页面将其放入数据库并为他们提供票号。

我的问题是，在第二次调用(执行输入的页面)时，我在 Firebug 中注意到 get 发生了两次。如果我单独尝试 asp 页面，它只进行一次输入，所以它不是我的 sql 代码。如果我将第二个 .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()，它会 trim 开头和结尾的所有空白，因此如果有人输入一堆空格，它仍然会返回 false。这就是您的做法:

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

这是验证它是否为空的更好方法，但是更好的想法是使用 jQuery Validation plugin ，您可以在其中为每个规则简单地放置 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 等其他浏览器中尝试过？