jQuery AJAX POST; 不发布

I'm fairly certain the issue I'm having is related to the jQuery's $.ajax({...}); function . When printing the array in PHP i get Notice: Undefined index.

I'd sincerely appreciate it if i could get some advice here.

<script>
$(document).ready(function(){
    $("#submit").click(function() {
         var platform_var =  $('input[name="platform"]').val();
         var bandwidth_var = $("#bandwidth-widget").val();
         alert(bandwidth_var); // Returns the array as an alert.
         $.ajax({
            url:    "index.php",
            type:   "POST",
            data:   {
                        platform_var: platform_var,
                        bandwidth_var: bandwidth_var
                        }
        });
    });
});
</script>

<?php 
print_r($_POST['platform_var']);
?>

Demo (w/o PHP)

You need to assign the values to the variables on document load.

$(document).ready(function() {
  platform_var =  $('input[name="platform"]').val();
  bandwidth_var = $("#bandwidth-widget").val();
});

EDIT: if the values are not instanciated on document load, you need to assign them when they actually have the correct value, just before you do the Ajax request.

$(document).on('submit', '#compare', function(e) {
     var platform_var =  $('input[name="platform"]').val();
     var bandwidth_var = $("#bandwidth-widget").val();
     $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: {
                    platform: platform_var,
                    bandwidth: bandwidth_var
                }
    });
});

Currently, you are assigning them before the values actually exists.

Hope this helps.

Your have two problems in your code:

The selector is wrong - you're searching for an input with the name attribute which equals to platform and in the html you have an array input with the name platform[]. Therefore it will not find any matching inputs, which is why the var platform_var is undefined or null.
To fetch the checked checkboxes, you need to add :checked to the selector, otherwise jQuery will return all of the checkboxes regardless of their checkbox status.

To fix this, simply change

var platform_var =  $('input[name="platform"]').val();

var platform_var =  $('input[name="platform[]"]:checked').map(function(){return $(this).val();}).get();

Also, have in mind that in your php script, the $_POST['platform'] variable will be an array.

I would advice you to have a look at the jQuery API documentation to further understand how the selectors work.

Here is the edited fiddle.

Edit: I've code I've added below confirms that the code in the fiddle is working fine. Apparently you are having trouble with your own php code rather than your JavaScript. I believe you should sit down and check your code.

<?php
// Save everything here in a file called "test.php"

if (isset($_POST) && !empty($_POST)){
    print_r($_POST);
    exit();
}

?>


<html>
<head>
    <title>Testing page</title>
    <link rel="stylesheet" type="text/css" href="http://www.hostingarchive.com/wp-content/themes/My-theme/assets/styles/jquery.selectBox.css"/>
    <link rel="stylesheet" type="text/css" href="http://www.hostingarchive.com/wp-content/themes/My-theme/assets/styles/jquery.nouislider.min.css"/>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://www.hostingarchive.com/wp-content/themes/My-theme/assets/scripts/jquery.selectBox.js"></script>
    <script type="text/javascript" src="http://www.hostingarchive.com/wp-content/themes/My-theme/assets/scripts/jquery.nouislider.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $('.cmp-select').selectBox();

            $("#price-widget").noUiSlider({
                range: [5, 150], start: [5, 75], step: [5], connect: true, direction: 'ltr', serialization: {
                    mark: '.', resolution: 1, to: [
                        [$("#low-price"), 'html'],
                        [$('#high-price'), 'html']
                    ]
                }
            });

            $("#bandwidth-widget").noUiSlider({
                range: [0, 2000], start: [10, 1000], step: [10], connect: true, direction: 'ltr', serialization: {
                    mark: '.', resolution: 1, to: [
                        [$("#low-bandwidth"), 'html'],
                        [$('#high-bandwidth'), 'html']
                    ]
                }
            });

            $("#submit").click(function () {
                var platform_var = $('input[name="platform[]"]:checked').map(function () {
                    return $(this).val();
                }).get();
                var bandwidth_var = $("#bandwidth-widget").val();
                alert(bandwidth_var);
                console.log(platform_var);
                console.log(bandwidth_var);

                $.ajax({
                    url : "test.php",
                    type: "POST",
                    data: {
                        platform_var : platform_var,
                        bandwidth_var: bandwidth_var
                    }
                });
            });
        });

    </script>
</head>
<body>

<div id="compare">
    <h3>Platform</h3>
    <input name="platform[]" type="checkbox" value="shared" checked="checked">Shared</input>
    <input name="platform[]" type="checkbox" value="dedicated">Dedicated</input>
    <input name="platform[]" type="checkbox" value="cdn">CDN</input>
    <input name="platform[]" type="checkbox" value="vps">VPS</input>
    <input name="platform[]" type="checkbox" value="vds">VDS</input>

    <h3>Bandwidth</h3>

    <div id="bandwidth-slide">
        <p class="inline-block"><span id="low-bandwidth"></span><span><small>GB</small></span></p>
        <div class="inline-block" id="bandwidth-widget"></div>
        <p class="inline-block"><span id="high-bandwidth"></span><span><small>GB</small></span></p>
    </div>

    <h3>Price</h3>

    <div id="pricing-slide" class="clearfix">
        <p class="inline-block">$<span id="low-price"></span></p>

        <div class="inline-block" id="price-widget"></div>
        <p class="inline-block">$<span id="high-price"></span><span>/mo</span></p>
    </div>
    <input type="submit" id="submit" value="enter">
</div>

</body>
</html>