Question

我有一个下拉列表，用户可以在其中选择多个选项。我将所选选项存储在以下格式的String变量中：[第一个选定选项的值]，[第二个选定选项的值] ...

现在我想使用Ajax将此变量的值从文件1中的Javascript传递到文件2中的PHP变量。这是我的代码

<!DOCTYPE html>
<head>
  <title>test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script> 
</head>
<body>
   <div class="container"> 
    <form method="post" action="displayData.php" id="multiple_select_form">
     <select name="columns" id="columns" class="form-control selectpicker"  multiple>
      <option value="Country">Country</option>
      <option value="Customer Name">Customer Name</option>
      <option value="Order Date">Order Date</option>
      <option value="Address">Address</option>
     </select>
    </form>
   <br>
   <button class="btn btn-info center-block" id="btn-get">Submit</button>
   </div>
</body>
</html>

<script>
  $('#btn-get').on('click', function() {
        var selectedOptions = [];
        $.each($(".selectpicker option:selected"), function(){            
            selectedOptions.push("[" + $(this).val() + "]");
        });
        var myVar = selectedOptions.join(",");
                    $.ajax({
                    type: "POST",
                    url: 'displayData.php',
                    data: { testVariable : myVar },
                    success: function(data)
                    {alert(data);}
                           });
  $("#multiple_select_form").submit();
});
</script>

我在Ajax中添加了关于成功的警报（数据），以查看变量是否获得了正确的值。它正在工作但是当表单被提交并且displayData.php被加载时我得到错误未定义的索引：testVariable

displayData.php是一个简单的测试文件

<?php   
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$variable = $_POST['testVariable'];
print_r($variable);
?>

任何人都可以解释一下这可能是什么问题吗？我相信Ajax写得正确。谢谢你的帮助。

Answer 1

您正在向displayData.php发送两个请求。一个是AJAX请求，其值设置在名为testVariable的字段中，一个是普通表单提交，其值设置在名为columns的字段中。错误发生在第二个请求上。

如果您打算使用AJAX，请删除以下代码：

$("#multiple_select_form").submit();

您甚至可能完全删除<form>包装器，因为您直接识别元素而不是真正使用表单本身进行序列化或其他任何操作。（如果您在中放置了按钮，它将自动提交，除非您明确处理该事件以取消该行为。）

相反，如果你做想要提交表单，那么你可以完全删除JavaScript代码并将提交按钮移到<form>包装器内。当然，将表单元素重命名为服务器端代码所期望的内容：

<select name="testVariable" ...

Answer 2

试试这个

<!DOCTYPE html>
<head>
  <title>test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script> 
</head>
<body>
   <div class="container"> 
    <form method="post" action="displayData.php" id="multiple_select_form">
     <select name="columns" id="columns" class="form-control selectpicker"  multiple>
      <option value="Country">Country</option>
      <option value="Customer Name">Customer Name</option>
      <option value="Order Date">Order Date</option>
      <option value="Address">Address</option>
     </select>


    <input type="hidden" name="testVariable" id="testVariable">


    </form>
   <br>
   <button class="btn btn-info center-block" id="btn-get">Submit</button>
   </div>
</body>
</html>

<script>
  $('#btn-get').on('click', function() {
        var selectedOptions = [];
        $.each($(".selectpicker option:selected"), function(){            
            selectedOptions.push("[" + $(this).val() + "]");
        });
        $("#testVariable").val(selectedOptions.join(","));


  $("#multiple_select_form").submit();
});
</script>

使用Ajax将变量从Javascript传递给PHP

2 个答案: