jQuery .post（）澄清

Question

Hey all, I know this question has been asked a million times before but I just can't seem to convert the answers into my personal project. I have a selector on my page that needs to send an AJAX query to my database and retrieve the results and print them under the selector. Thank you to anyone who can clarify what needs to be done for this to work.

Here is the php file called "view.php" minus the query I make to the database.

$depView = $_POST['depView'];

foreach($result as $entry){
echo  '<div>' . $entry['department']. $entry['CRN']. ' ' . $entry['title'] . ' ' . $entry['addDate'] . '</div>';
}

Here is my Javascript thus far:

function getProps(data){
        $.post("view.php", {depView: data}, html)

        }

Here is my selector:

<select onchange="getProps(value);" name="depView">
        <option value=""></option>
        <option value="CSC">CSC</option>
        <option value="MAT">MAT</option>
        </select></br>

Answer 1

You must use a the callback function to retrieve data after the successfull request.

It could be something like that :

$.post('view.php', {depView: data}, function(data) {
  $('.result').html(data);
});

Just edit the part in the "function(data)" to do what you want with the retrieved data.

Answer 2

You should replace your $.post code with:

$.post("view.php",{depView:data},
   function(msg) {
     alert("Data Loaded: " + msg);
   },"html")

msg contains the result of executing view.php

You could replace alert("Data Loaded: " + msg); with $('selector').html(msg) . The last param html is opotional.jQuery indentifies the type of data send by view.php .

Answer 3

HTML:

<select name="depView" id="depView">
  <option value=""></option>
  <option value="CSC">CSC</option>
  <option value="MAT">MAT</option>
</select><br />
<div id="ajaxResults"></div>

JavaScript:

<script type="text/javascript">

// on DOM load
$(function () {

  $('#depView').change(function () {
    $.post('view.php',
       { depView: $(this).val() },
       function (data) {
         $('#ajaxResults').html(data);
       },
       'html'
       );
  });

});

</script>