jQuery AJAX POST; 不发布

Question

I'm fairly certain the issue I'm having is related to the jQuery's $.ajax({...}); 我相当确定我遇到的问题与jQuery的$.ajax({...}); function . 功能。 When printing the array in PHP i get Notice: Undefined index . 当在PHP中打印数组时，我得到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) 示范（不含PHP）

Answer 1

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. 编辑：如果未在文档加载时实例化这些值，则在执行Ajax请求之前，您需要在它们实际具有正确的值时进行分配。

$(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. 希望这可以帮助。

Answer 2

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[] . 选择器错误-您正在搜索具有等于platform的name属性的输入，并且在html中，您有一个名为platform[]的数组输入。 Therefore it will not find any matching inputs, which is why the var platform_var is undefined or null . 因此，它将找不到任何匹配的输入，这就是为什么var platform_var undefined或为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. 要获取选中的复选框，您需要在选择器中添加:checked ，否则jQuery将返回所有复选框，无论其复选框状态如何。

To fix this, simply change 要解决此问题，只需更改

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

to 至

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. 另外，请记住，在您的php脚本中， $_POST['platform']变量将是一个数组。

I would advice you to have a look at the jQuery API documentation to further understand how the selectors work. 我建议您看一下jQuery API文档，以进一步了解选择器的工作方式。

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. 显然，您在使用自己的php代码而不是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>

jQuery AJAX POST; 不发布

问题描述

2 个解决方案

解决方案1
2 2014-02-04 23:34:03

解决方案2
1 已采纳 2014-02-06 19:00:26

jQuery AJAX POST; 不发布

问题描述

2 个解决方案

解决方案1 2 2014-02-04 23:34:03

解决方案2 1 已采纳 2014-02-06 19:00:26

解决方案1
2 2014-02-04 23:34:03

解决方案2
1 已采纳 2014-02-06 19:00:26