根据所选项目 php 填充表单

Question

我有一个带有选择列表（从 mysql 成功填充）和一个文本框的页面。文本框必须根据列表中选择的项目填充来自 mysql 的值。但是对 php 的 ajax 调用不起作用，我无法弄清楚问题所在。我只是学习ajax和php，所以新手..请帮助。我被这个困扰了很长时间。

<script>
$(document).ready(function() {
  $('.selectpicker').on("change", function(){
    var selected_data = $(this).find("option:selected").val();
    alert(selected_data);
	$.ajax ({
            type: "POST",
			data: { selected_data: selected_data },
			url: "getoldcharity.php",
            dataType: "json",
            success: function(res) {
                $('#charity_new').val(data.charity_new);
            }
        });
  });
});
</script>


<form id="assign-fundraiser_form" class="form-horizontal" action="" method="post">
 <div class="form-group">
   <div class="col-md-3">
     <select class="selectpicker form-control" id="fundraiser" name="fundraiser" required>
       <option value="" selected disabled>Select a Fundraiser</option>
       <?php
         include('session.php');
         $result1 = mysqli_query($db,"select concat(f_firstname,' ',f_lastname) fundraiser from fundraiser where f_company in (select contractor_name from contractor where company_name = '$_SESSION[login_user]') and f_status = 'Active' order by concat(f_firstname,' ',f_lastname)");
         while ($rows = mysqli_fetch_array($result1)) 
         {
          echo "<option>" .$rows[fundraiser]. "</option>";
         }
       ?> 
     </select>
    </div>
 </div>
<input type="text" name="charity" id="charity_new" />
</form>

<?php
include "session.php";
if (ISSET($_POST['.selectpicker'])) {
    $ref = $_POST['.selectpicker'];
    $query = $db->query("select f_charity charity_new from fundraiser limit 1");
    $row = $query->fetch_assoc();
    $charity_new = $row['charity_new'];
    $json = array('charity_new' => $charity_new);
    echo json_encode($json);
}

$db->close();
?>

Answer 1

我快速浏览了一下发现了一些问题，所以我在下面将它们分开。

PHP

在您的 AJAX 请求中，您使用的是 data: { selected_data: selected_data }，这意味着 PHP 代码将期待一个名为 selected_data 的 POST 键，但您正在寻找 .selectpicker。您似乎混淆了几件事，所以不要：

$_POST['.selectpicker']

应该是：

$_POST['selected_data']

JavaScript

正如Ravi 在他的回答中指出的，你还需要改变你的成功函数。传递给这个函数的参数是res而不是data，所以改为：

$('#charity_new').val(data.charity_new);

应该是：

$('#charity_new').val(res.charity_new);

MySQL

您的查询本身似乎也无效 - 您似乎在列选择中缺少逗号。

select f_charity charity_new from fundraiser limit 1

应该是：

select f_charity, charity_new from fundraiser limit 1

或者，看到你没有在结果中使用f_charity 列：

select charity_new from fundraiser limit 1

您也没有使用正在发布的值，这意味着在下拉列表中选择的任何选项对查询本身都没有影响 - 它始终会返回数据库中的第一条记录。

其他

要注意的另一件事是您在更改功能上使用了类选择器。这意味着如果您的 HTML 中有多个具有相同类名的下拉菜单，它们都将调用相同的 AJAX 函数并更新文本框。我不知道这是否是您的目标，但是从您发布的代码中，您在表单中只有一个下拉菜单。如果您只希望该下拉菜单调用 AJAX 函数，则应使用 ID 选择器：

$('#fundraiser').on("change", function() {
    // ...
}

Answer 2

我觉得应该是

$('#charity_new').val(res.charity_new);

而不是

$('#charity_new').val(data.charity_new);