Javascript 通过jqueryajax发布数据

我试图使用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>

函数insertBill（）
{
var票据=$（“#票据”）.val（）；
$.post（'insert_bill.php'，{total:total，bill name:bill name，bill description:bill description，bill color:bill color}，函数（数据）
{
$（“#bills”）.html（数据）；
});
}

---

但是由于某些原因，我的值没有被传递。我是AJAX新手，所以我一直在学习教程，请原谅我的天真！如何实现这一点？

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

试着这样做：

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

或者您可以预先设置变量

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

---

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

您正在传递甚至没有定义的变量。您需要像使用

var-bill=$（“#bill”）.val（）一样定义所有post变量然后传递它们

我建议你使用jQuery插件，它可以为你做任何事情。我使用它，它工作得很好。
将您的
表单
标签更改为这个（或类似的东西）



在您的功能中，请执行以下操作：

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


函数insertBill（）{
var票据=$（“#票据”）.val（）；
$.post（'insert_bill.php'，{total:total，bill name:bill name，bill description:bill description，bill color:bill color}，函数（数据）
{
$（“#bills”）.html（数据）；
} );
返回true；//以便表单可以继续。
}
对于这一点以及其他许多PHP、jQuery和ajax问题，我强烈建议您尝试以下方法：

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


函数insertBill（）
{
$.post（'insert_bill.php'，$（'form'）.serialize（），
功能（数据）{
$（“#bills”）.html（数据）；
});
}
忽略缺少的值，
票据名称
不是有效的标识符，如果确实要使用
票据名称
，应将其括在引号中，并使用jQuerys检索值：

此外，在函数中，您正在调用id为
bill
的表单。编辑表单标记，并添加此id
<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>

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

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