如何用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被cathed：

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

所以这个问题真的是：我如何追加第二个用户名到上面的jQuery POST函数？

p.s.我开始与JavaScript和jQuery，你们如何工作，因为没有错误消息显示过..有没有一个环境/ programm我得到调试与JavaScript的帮助？

Answer 1

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

<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() 

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

Answer 2

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

Answer 3

您可能在寻找serialize。您的代码会是这个样子：

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 developer tools。

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']); 
     } 
    }); 
}