通过jQuery AJAX发布数据

时间:2012-04-12 20:49:29

标签: javascript jquery ajax

我正在尝试使用AJAX将数据发布到我的表中,我有以下形式,

<form>
    Total <input type="text" id="total" name="total" /><br />
    Bill name<input type="text" id="bill-name" name="bill-name" /><br />
    bill descriptiion <input type="text" id="bill-description" name="bill-description" /><br />
    bill colour<input type="text" id="bill-colour" name="bill-colour" />
    <input type="button" value="submit" onClick="insertBill();" />
</form>    

我的AJAX代码是......

<script type="text/javascript">
function insertBill()
{
    var bill = $("#bill").val();
    $.post('insert_bill.php', {total: total, bill-name: bill-name, bill-description: bill-description, bill-colour: bill-colour}, function(data) 
    {
        $("#bills").html(data); 
    });
}
</script>

出于某种原因,我的价值观没有通过。我是AJAX的新手,所以我一直在关注一个教程,所以请原谅我的天真!我如何使这项工作?

5 个答案:

答案 0 :(得分:1)

对于这个以及许多其他PHP,jQuery ajax问题,我强烈建议serialize试试这个:

<div id="bills"></div>
<script type="text/javascript">
function insertBill()
{
    $.post('insert_bill.php', $('form').serialize(), 
        function(data) {
        $("#bills").html(data); 
    });
}

答案 1 :(得分:0)

您的javascript变量尚未定义。你的javascript函数不知道表单。

尝试这样的事情:

$.post('insert_bill.php', {total: $('#total').val(), bill-name: $('#bill-name').val()...

或者您可以事先设置变量

<script type="text/javascript">
function insertBill()
{
  var total = $('#total').val();

我不确定这是做什么的:

var bill = $("#bill").val();

我没有看到任何id =“bill”

答案 2 :(得分:0)

您正在传递甚至未定义的变量。您需要像使用var bill = $("#bill").val();一样定义所有的帖子变量,然后传递它们。

我建议你使用this jQuery插件为你做任何事情。我用它,它工作正常。

答案 3 :(得分:0)

将您的form标记更改为此(或类似内容)

<form id="bill" onsubmit="return insertBill();">

并在您的函数中执行此操作:

<script type="text/javascript">
  function insertBill() {
    var bill = $("#bill").val();
    $.post('insert_bill.php', {total: total, bill-name: bill-name, bill-description: bill-description, bill-colour: bill-colour}, function(data) 
      {
        $("#bills").html(data); 
      } );
    return true;     // So that form may proceed.
  }
</script>

答案 4 :(得分:0)

忽略缺失的值,bill-name不是有效的标识符,如果你真的想使用bill-name,你应该将它包装在引号中并使用jQuery val()检索值:

$.post('insert_bill.php',{ 'bill-name' : $('#bill-name').val() } ....