getting the rest of the row in a database using JQuery

Ok, so I have this search box in which people typein a food item. When they press the button I need that input to be send to a .php file. That php file will look op the calories of that food item (thats in my database) and output the food item name and calories. All this need to be done without reloading the page so I started figuring out how JQuery works.

However I am stuck, I don't know what to put in the data field of the jquery function and how I can 'catch' that data in the .php file. Can someone give me an idea? thanks a lot! (see the ??????'s for things i don't understand). Also, the data that comes back needs not to be in an alert box in the end, but update some table on my page, how can i do this? which JSON (?) Jquery function do I need?

what I have up until now:

in head:

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

$.ajax({
  type: 'POST',
  url: 'getFood.php',
  data: '????????',
  success: function(data){ 
    alert("Data Loaded: " + data); 
  }

});

}
</script>

and in body:

<form autocomplete="off">
        <p>
            Product:
            <input type="text" name="food" id="fo开发者_如何学Cod" class="food_name_textbox" onmouseover="javascript: this.className='food_name_textbox_mouseover';" onmouseout="javascript: this.className='food_name_textbox';" / >
        </p>
        <button id="zoek" type="button" onClick="contentDisp();">Zoek</button>
    </form>

and in getFood.php:

<?php
require_once "config.php";
$id = "??????"
$result = mysql_query("SELECT * FROM voedingswaarden WHERE voedsel='$id'");
$row = mysql_fetch_array($result);

echo json_encode($row);

?>

---

$.ajax({
  type: 'POST',
  url: 'getFood.php',
  data: {'foodnametextbox' : $('#food').val() },
  datatype: "json",
  success: function(data){ 
    $('#table').html(data);
  }
});

<?php
require_once "config.php";
$id = $_POST['foodnametextbox']; //escape and validate this input before using it in a query
$result = mysql_query("SELECT * FROM voedingswaarden WHERE voedsel='$id'");
$row = mysql_fetch_array($result);

echo json_encode($row);

?>

---

<script type="text/javascript">
function contentDisp()
{
var textSearch = $("#myText").text();

$.ajax({
  type: 'POST',
  url: 'getFood.php',
  data: textSearch,
  success: function(data){ 
    alert("Data Loaded: " + data); 
  }

});

}
</script>

PHP:

$id = $_POST['textSearch'];