jQuery 和 AJAX？

Question

我正在制作一个简单的表单，其中包含 5 个

input

元素作为地址的一部分。我使用 jQuery 构建 AJAX 请求并将其发送到服务器上的 PHP 文件。由于某种原因，我的 jQuery 无法正确读取我的

input

元素中的值。可能出了什么问题？

这是我的 jQuery：

$('#submitButton').click(function(){
    $('#BBRequestBox').html('<img src="images/loading.gif" />');
        
    alert('Info: ' + $('#name').val() + ' ' + $('#street').val() + ' '
                   + $('#city').val() + ' ' + $('#state').val() + ' '
                   + $('#zip').val() + ' ');
    $.ajax({
        type: "POST",
        url: "./bbrequest.php",
        data: {
            name:   $('#name').val(),
            street: $('#street').val(),
            city:   $('#city').val(),
            state:  $('#state').val(),
            zip:    $('#zip').val()
        },
        success: function(msg){
            $('#BBRequestBox').html('<p>' + msg + '</p>');
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            $('#BBRequestBox').html('<p> There\'s been an error: '
                + errorThrown + '</p>');
        }
    });
    return false;
});

这是我的 HTML：

<div id="BBRequestBox">
    <form action="#">
        <label>Name:</label><input type="text" name="name" id="name" class="textbox" />
        <label>Street:</label><input type="text" name="street" id="street" class="textbox" />
        <label>City:</label><input type="text" id="city" class="textbox" />
        <label>State:</label><input type="text" id="state" class="textbox" />
        <label>Zip:</label><input type="text" id="zip" class="textbox" />
        <input type="submit" value="Send Me a Bitachon Builder!" id="submitButton" />
    </form>
</div>

编辑：

现场示例位于 Bitachon.org/new。单击“获取 Bitachon Builder。（最左侧页脚链接）

Answer 1

您正在将请求框的 html 替换为加载 gif。 因此，当您尝试访问它们时，输入不再存在。

$('#BBRequestBox').html('<img src="images/loading.gif" />'); 

你可以这样做：

$('#BBRequestBox').prepend('<img src="images/loading.gif"/>').find('form').hide();

Answer 2

好的，因为您正在用加载图像替换请求框的内容，所以您实际上是在处理它们之前删除包含数据的标签...因此，当您的 jQuery 函数查找元素时，它找不到他们以及他们的价值观......

如果删除此行：

$('#BBRequestBox').html('<img src="images/loading.gif" />');

它将起作用...

我正在研究一种同时获取加载图像的方法<- Looks like you already have the solution for that below :P

Answer 3

应该可以。 我的猜测是，当您尝试附加点击处理程序时，输入元素不存在。 尝试将你的 js 包装在：

$(document).ready(function(){
  // Your stuff goes here
});

Answer 4

我不知道为什么你的代码不起作用，但我建议查看 serialize() jQuery 函数，而不是手动构造你的数据对象。它将减少你需要编写的代码量，这可以消除你的错误。

我们都知道编码更小是个好主意。 :-)