1

这里对 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
4

2 回答 2

1

首先，验证字段是否填写的更好方法是使用 jQuery $.trim()，它会修剪开头和结尾的所有空白，因此如果有人输入一堆空格，它仍然会返回 false。你会这样做：

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

这是验证它是否为空的更好方法，但更好的想法是使用jQuery Validation 插件，您可以在其中为每个规则简单地放置class="required"、class="required email"等（如果您也可以在 javascript 中定义它们）更喜欢）。

另外，我看到你一直在使用.load. 你知道有一种东西叫做$.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 回答
1

我今天从一个论坛得到了答案。不记得在哪里，但答案是......

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

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

于 2012-04-22T03:05:50.887 回答