Post-Daten über jQuery AJAX

Question

Ich versuche, Daten auf meinen Tisch schreiben mit AJAX, ich habe das folgende Formular,

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

Und mein AJAX-Code ist als ...

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

Aus irgendeinem Grund werden meine Werte jedoch nicht weitergegeben. Ich bin neu in AJAX und folge daher einem Tutorial, also entschuldige meine Naivität! Wie mache ich das?

Answer 1

Für diese und so viele andere PHP, Probleme jQuery Ajax, I highly recommend serialize dies versuchen:

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

Answer 2

Ihre Javascript-Variablen wurden noch nicht definiert. Ihre JavaScript-Funktion kennt das Formular nicht.

so etwas wie dieses Versuchen:

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

Oder Sie können Ihre Variablen vorher

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

Ich bin nicht sicher festgelegt, was diese allerdings tut:

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

I don sehe keine ID = "Rechnung"

Answer 3

Sie übergeben Variablen, die nicht einmal definiert sind. Sie müssen alle Post-Variablen definieren, wie Sie es mit getan haben, und sie dann übergeben.

Ich würde Ihnen empfehlen, this jQuery Plugin zu verwenden, das alles für Sie tut. Ich benutze es und es funktioniert gut.

Answer 4

Ihr form Tag Um dies ändern (oder etwas ähnliches)

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

und in Ihrer Funktion, dies zu tun:

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

Answer 5

die mis Ignorieren singen Werte, bill-name ist keine gültige identfier, wenn Sie wirklich verwenden möchten bill-name sollten Sie es in Anführungszeichen wickeln und den Wert abrufen jQuerys val() mit:

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