javascript - How to pass multiple variables to PHP with jQuery

Question

Ok guys hope you can help me with this one as well. I am not to crazy knowledgeable with jQuery and AJAX and probably I am missing something very simple. I am not able to pass more than 1 variable. I have tried several different things amongst closest to what I have working is this but even that didn't work.

jQuery

$("#bodymes ul li span[contenteditable=true]").blur(function(){
            var weight_id = $(this).attr("id") ;
            var weightbody_mes = $(this).text() ;
            $.post( "../includes/bodymes_weight.php", { weightbodymes: weightbody_mes })  
                .done(function( data ) {   
                    $(".weightsuccess").slideDown(200); 
                    $(".weightsuccess").html("Weight Updated successfully"); 
                    if ($('.weightsuccess').length > 0) {
                        window.setTimeout(function(){
                            $('.weightsuccess').slideUp(200);
                        }, 4000);
                    }  
                    // alert( "Data Loaded: " + data);
            });
        });

So basically If I run this it will work perfectly fine and my PHP script will process it. Notice that when I go and enable to alert me and show data loaded it shows correct info (info from weightbodymes) and I am able to update db. But as soon as I add another variable { weightbodymes: weightbody_mes, weightid: weight_id } it won't show data loaded in alert box (if I try to show info from both variables it's working but it only submits one var only to PHP which is:

    $weightid = $_POST['weightid'];
    $weight = $_POST['weightbodymes'];

    if ($insert_stmt = $mysqli->prepare("UPDATE body SET body_weight=? WHERE body_id='$weightid'")) {
            $insert_stmt->bind_param('s', $weight);
            // Execute the prepared query.
            if (! $insert_stmt->execute()) {
                header('Location: ../index.php?error=Registration failure: INSERT nwprogram1');
            }
    }

Hope you can tell me where I am making a mistake and how to correct it. THANK YOU IN ADVANCE!

Answer 1

POST AJAX REQUEST using JS / JQUERY. The below is the syntax I use for all my AJAX calls.

var first = 'something';
var second = 'second';
var third = $("#some_input_on_your_page").val();


///////// AJAX //////// AJAX //////////
    $.ajax({
        type: 'POST',
        url:  'page_that_receives_post_variables.php',
        data: {first:first, second:second, third:third},
        success: function( response ){
            alert('yay ajax is done.');
            $('#edit_box').html(response);//this is where you populate your response
        }//close succss params
    });//close ajax
///////// AJAX //////// AJAX //////////

Code for the PHP page page_that_receives_post_variables.php

<?php
$first = $_POST['first'];
$second = $_POST['second'];
$third = $_POST['third'];

echo 'now do something with the posted items.';
echo $first; //etc...
?>