Question

这里是JQuery AJAX的新手。我一直在四处寻找答案，但找不到答案。

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

我的问题是在第二次调用（执行输入的页面）时，我在firebug中注意到获取发生了两次。如果我单独尝试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()，它将在开头和结尾修剪所有空格，这样如果有人进入一堆空格，它将返回假的。这就是你要做的事情：

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

这是一种更好的方法来验证它是否为空，但更好的想法是使用jQuery Validation plugin，您可以在其中简单地放置class="required"，{{1}每个规则等等（如果您愿意，也可以在javascript中定义）。

此外，我发现您继续使用class="required email"。你知道名为$.get的东西存在吗？这是发送get请求的一种更强大的方法，您不必将其加载到元素中以使其工作（还有$.post）。我过去常常一直使用.load，直到我发现.load和$.get为止。这是您的代码示例：

$.post

无论如何，现在回答你的问题。

我没有看到为什么它会这样做的任何问题，但它可能是浏览器或其他东西的错误（通常不会，但这也发生在我之前，我从来没有发现如何解决它）。您是否曾在谷歌浏览器或Safari等其他浏览器中试用过它？

Answer 2

我今天在论坛上得到了答案。不记得答案在哪里....

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

我在fadeOut中有2个选择器。它为每个选择器调用了两次加载函数。改变它，现在我只得到一个GET请求。感谢大家的帮助！ :)快乐编码！

使用JQuery和AJAX的多个GET请求

2 个答案: