如何使用jQuery发送两个输入

Question

好的，我有这两个输入字段，用户在其中输入了两个Twitter名称。 当按下提交按钮时，两个名称都应该使用POST方法发送到.php文件，该方法检查两个用户名是否都存在于twitter上。

发送和接收一个值的答案已经可以使用，但是我该如何添加另一个值呢？ 我已经有这个了：

<script type="text/javascript">
function checkUsername()
{

    $.ajax({
        type: 'POST',
        url: 'tu.php',
        **data: {'user1' : $('#user1').val() },** //how to append user2?
        dataType: "json",
        success: function(data){
            $('#uitslag').html(JSON.stringify(data)); 
            $('#user1text').html(data['user1']);
            $('#user2text').html(data['user2']);
        }
    });
}
</script>

表单中的字段：

    <td><input type="text" name="user1" id="user1"/></td>
    <td><input type="text" name="user2" id="user2" /></td>

这就是应该如何在.php中添加值的方式：

$user1 = $_POST['user1'];
$user2 = $_POST['user2'];

所以问题实际上是：如何将第二个用户名附加到上述jQuery POST函数中？

ps我是从javascript和jQuery开始的，你们如何使用它，因为从没有显示错误消息。.是否有环境/程序可以帮助我调试javascript？

Answer 1

data: {
     'user1' : $('#user1').val(), 
     'user2' : $('#user2').val()
},

Answer 2

这是一个足够简单的扩展-遵循相同的模式。

<script type="text/javascript">
function checkUsername()
{

    $.ajax({
        type: 'POST',
        url: 'tu.php',
        data: {
            'user1' : $('#user1').val(),
            'user2' : $('#user2').val()
        },
        dataType: "json",
        success: function(data){
            $('#uitslag').html(JSON.stringify(data)); 
            $('#user1text').html(data['user1']);
            $('#user2text').html(data['user2']);
        }
    });
}
</script>

也就是说，jQuery确实还有一个.serialize()函数，您可以将其应用于包含表单，该函数会自动序列化整个表单。 这可能对您有用。

---

编辑：值得一提的是，上面的jQuery选择器在id上查找名称为“ user1”（等），而PHP脚本期望表单元素的名称为“ user1”（等）。 在这里，它们具有相同的功能。

一个更可靠的jQuery选择器，可以让您始终在jQuery和PHP中同时使用名称，只是在jQuery中使用属性选择器：

$('input[name="user1"]').val()

这将捕获name属性设置为“ user1”的任何<input>元素。

Answer 3

您可能正在寻找序列化 。 您的代码如下所示：

function checkUsername()
{

    $.ajax({
        type: 'POST',
        url: 'tu.php',
        data: $("#your_form").serialize(),
        dataType: "json",
        success: function(data){
            $('#uitslag').html(JSON.stringify(data)); 
            $('#user1text').html(data['user1']);
            $('#user2text').html(data['user2']);
        }
    });
}

如果您确定不想序列化，则可以尝试以下操作：

data: {'user1' : $('#user1').val(), 'user2' : $('#user2').val() }

至于您的PS，请查看Firebug和Webkit开发人员工具 。

Answer 4

您实际上甚至不需要序列化功能。 如果仅选择表单，则将传递所有表单元素。 这样，如果您仅添加另一个表单元素（例如另一个文本框），则所有这些都将在ajax调用中传递。

function checkUsername()
{

    $.ajax({
        type: 'POST',
        url: 'tu.php',
        data: $("#your_form"),
        dataType: "json",
        success: function(data){
            $('#uitslag').html(JSON.stringify(data)); 
            $('#user1text').html(data['user1']);
            $('#user2text').html(data['user2']);
        }
    });
}