如何在不使用Ajax重新加载页面的情况下更新数据库和div

Question

I am very new to programming. I made a page with drop-downs, and by selecting the options I wish to update a field(score) in MySQL database and also in the div of the same page without actually reloading the whole page. Can someone please show me an example of how I can do it with Ajax? -Thanks

while($row=mysql_fetch_assoc($result_arrays)){
        $userid=$row['userid']; 
        $score=$row['score'];
        echo "                      
             <p><div class='user'><a href='#'><b>$userid</b></a></div>
             <p><div class='score'>Score: $score</div>   
             <form action ='' method = 'POST'>
               <select name='userscore' id='user_scores'>
               <option>1</option><option>2</option><option>3</option><option>4</option>
               </select>                   
               <input type='submit' value = 'Update Score' id= 'submit-score'/>
             </form>                         
             <br />
             ";
           }

Answer 1

using JQuery

<script>
$("#user_scores").change(function () {
  var str = "";
  $("#user_scores option:selected").each(function () {
        str += $(this).text() + ",";
      });
  $.ajax({
  type: "POST",
  url: "some.php",
  data: { values: str }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});
})
.trigger('change');
</script>

more on http://api.jquery.com/jQuery.ajax/

some.php is your php file with script.

remember to bind "change" event after document is ready or your select code is loaded.

In some.php you should get these values in that way

$values = explode(",",$_POST['values']);