php，jquery和ajax - 根据之前选定的值填充选择下拉列表

Question

我被告知我之前的帖子不是很清楚，所以我会尝试以不同的方式提出。

我正在OOP食谱书中工作。目前，我正在努力添加食谱。为此，我显示一个测量下拉列表，当用户选择测量时，我想显示另一个下拉列表，其中包含为该measurement_id找到的单位。

mysql上的表是带有id和name列以及id，name和measurement_id列（measurement_id是单位表的外键）的单位的度量值。多个单位将属于一个测量。

为此，我创建了一个测量php对象/类。

在new_recipe.php，我包括形式，其余列添加配方，我将只包括这件事我现在治疗：

注：上measurement.php，测量PHP对象/ class有这些方法： - display_measurements（） - >只需从测量表中选择所有测量。 - get_units_for_measurement（$ measurement_id） - >选择所有具有相同measurement_id的单位。

public function display_measurements() { 
     include 'includes/db_connection.php'; 
      try { 

     $sql = "SELECT id, name FROM measurements"; 

     $results = $conn->prepare($sql); 
     $results->execute(); 
    } catch(PDOException $e) { 
     echo 'Error: ' . $e->getMessage() . '<br />'; 
     return array(); 
    } 
     return $results->fetchAll(PDO::FETCH_ASSOC); 
    } 


    public function get_units_for_measurement($measurement_id = ':measurement_id') { 
     include 'includes/db_connection.php'; 

     try { 
      $sql = "SELECT measurements.id, units.id, units.name " 
       . "FROM measurements " 
       . "JOIN units " 
       . "ON measurements.id=units.measurement_id WHERE measurements.id=:measurement_id"; 
      $result = $conn->prepare($sql); 
      $result->bindParam(':measurement_id', $measurement_id, PDO::PARAM_INT); 
      $result->execute(); 
     } catch(PDOException $e) { 
     echo 'Error: ' . $e->getMessage() . '<br />'; 
     return array(); 
    } 
    return $result->fetchAll(PDO::FETCH_ASSOC); 
    } 

<form id="newRecipe" method="POST" action="new_recipe.php"> 
(...) 
    <div class="input_group"> 
     <label for="name" class="required">Name</label> 
     <input name="name" type="text" value="" /> 
    </div> 
    <div class="input_group"> 
     <label for="measurements" class="required">Measurements</label> 
     <select name="measurements" class="selectMeasurement"> 
      <option disabled selected value=""> -- select a measurement -- </option> 
<?php 
$measurements = $measurementObj->display_measurements(); 
foreach ($measurements as $measurement) { 
    echo '<option value="' . $measurement['id'] . '" '; 
    echo '>' . $measurement['name'] . '</option>'; 
} 
?> 
     </select>   
    </div> 
    <div class="input_group"> 
     <label for="units" class="required">Units</label> 
     <select id="selectUnit" name="units"> 
      <option disabled selected value=""> -- select a unit -- </option> 
      <?php 
      if (isset($_POST['measurements'])) { 
       die('ddddd'); 
       // $units = $measurementObj->get_units_for_measurement($_POST['measurements']); 
      //  foreach ($units as $unit) { 
      //   echo '<option value="' . $unit['id'] . '" '; 
      //   echo '>' . $unit['name'] . '</option>'; 
      //  } 
      } 
      ?> 
     </select> 
    </div> 
    (...) 
    <button class="submit" type="submit" name="submit">Submit</button> 
</form> 

您可以在窗体中看到两个选择下拉菜单;第一个是我正在显示测量结果的那个，另一个是我用一些注释行来说的地方，我将它放置在“过滤”在第一个下拉列表中选择的measurement_id以显示所属单元。它不会重新加载页面，我被建议用ajax（我不太熟悉）来做。这Ajax调用在一个js文件，链接到项目的页脚：

$(document).ready(function() { 
    $('#newRecipe').on('change','.selectMeasurement', function(){ 
     var selectedMeasurementId = this.value; 
     $.ajax({ 
      method: 'POST', 
      url: 'classes/measurement.php', 
      data: selectedMeasurementId 
     }); 
     return true; 
    }); 
});  

或
$（文件）。就绪（函数（）{ $（ '＃newRecipe'）上（” 。变化”， 'selectMeasurement'，函数（）{ VAR selectedMeasurementId = THIS.VALUE; $就（{ 方法： 'POST'， URL： '类/ measurement.php'， 数据：selectedMeasurementId， 成功：function（）{ alert（selectedMeasurementId）; } }）; }）;
}）;

在js文件，我在脑子里很成功，调用该方法的对象：

成功：$ measurementObj-> get_units_for_measurement（$ _ POST [ '测量']），我明白，如果我有一个Ajax响应，我想获得给定度量单位，但是，我不能在这里调用一个PHP对象。

另外，我在设置测量时试图做一些事情。选择的测量后，我试图做的：

if (isset($_POST['measurements'])) { 
    //then $measurementObbj->get_units_for_measurement|($_POST['measurements']), but it seems it does not "detect" the measurements has been set. 
} 

所以我的问题是....我怎么能执行此$ measurementObj-> get_units_for_measurement（measurement_id在第一个下拉列表中选择），为的成功ajax请求？

我希望现在有点清楚。 谢谢

Answer 1

免责声明：这是一个公正的，你如何能做到这一个粗略的和未经考验的草图。如你所说的OOP，我会首先重构你如何访问数据库以更加面向对象。我将使用一个缩短版本的DAO模式。如果您按照certain conventions，它使它非常容易使用。这种模式有很多缺点，但大多数情况下它会使您的代码更加有组织。

首先，我将创建两个类MeasurementDAO和UnitDAO，它们将分别用于访问每个表的数据。 （你可以只使用一个类，如果它是你更方便。）

类/ MeasurementDAO.php

class MeasurementDAO 
{ 
    protected $conn; 

    public function __construct(PDO $conn) { 
     $this->conn = $conn; 
    } 

    public function getMeasurements() { 
     try { 
      // no need to use prepare() if you are not using any placeholders e.g. :name or ? 
      // query() and prepare() do not return results, but a (st)atement (h)andler 
      $sth = $this->conn->query("SELECT id, name FROM measurements"); 
      return $sth->fetchAll(PDO::FETCH_OBJ); 
     } catch (PDOException $e) { 
      echo 'Error: ' . $e->getMessage() . '<br />'; 
     } 
    } 
} 

类/ UnitDAO.php

class UnitDAO 
{ 
    protected $conn; 

    public function __construct(PDO $conn) { 
     $this->conn = $conn; 
    } 

    public function getUnitsByMeasurement($measurementId) { 
     try { 
      // if I am not mistaken, this query should be shorter and equivalent to your initial one 
      $sth = $this->conn->prepare("SELECT * FROM units WHERE measurement_id = ?"); 
      // I have never seen any reason to use bindParam() as you can just pass your values in execute() 
      $sth->execute(array($measurementId)); 
      return $sth->fetchAll(PDO::FETCH_OBJ); 
     } catch (PDOException $e) { 
      echo 'Error: ' . $e->getMessage() . '<br />'; 
     } 
    } 
} 

（您可能还需要一个RecipeDAO.php与方法，如getRecipes(),addRecipe($recipe),updateRecipe($recipe)， deleteRecipe($id)。）

接下来，当您向脚本发出AJAX请求时，您不希望直接调用该类。相反，你想调用一个使用该类的脚本。

ajaxHandler.php

// this will hold the data to be sent back as our response 
$res = array(); 
// initialize connection 
$conn = new PDO(/*...*/); 
// determine what action to take 
if ($_GET['action'] === 'get_units') { 
    // get units 
    $res['units'] = (new UnitDAO($conn))->getUnitsByMeasurement($_GET['measurement']); 
} 
header('Content-Type: application/json'); 
// last line: send response (it should be the only thing that gets outputted) 
echo json_encode($res); 

你会转到例如，呼叫从您的JavaScript脚本ajaxHandler.php?action=get_units&measurement=123。

接下来，我们将使用我们的新方法得到测量结果。 （我个人觉得它更好，更清洁做的所有数据库的东西在开始 - 反对这样做，你的输出HTML）

new_recipe.php

<?php 
// initialize connection 
$conn = new PDO(/*...*/); 
// get measurements 
$measurements = (new MeasurementDAO($conn))->getMeasurements(); 
?> 

<form id="newRecipe" method="POST" action="new_recipe.php"> 
    <!-- etc --> 
    <div class="input_group"> 
     <!-- sidenote: label's FOR attribute attaches itself to the inputs's ID attribute, not NAME attribute --> 
     <label for="measurements" class="required">Measurements</label> 
     <select name="measurements" class="selectMeasurement"> 
      <option disabled selected value=""> -- select a measurement -- </option> 
      <?php if ($measurements) : ?> 
       <?php foreach ($measurements as $measurement) : ?> 
        <option value="<?php echo $measurement->id ?>"><?php echo $measurement->name ?></option> 
       <?php endforeach ?> 
      <?php endif ?> 
     </select> 
    </div> 
    <div class="input_group"> 
     <label for="units" class="required">Units</label> 
     <select name="units" id="selectUnit"> 
      <option disabled selected value=""> -- select a unit -- </option> 
     </select> 
    </div> 
    <!-- etc --> 
</form> 

最后，让我们呼唤ajax处理脚本并构建选项列表。

// shorter syntax for $(document).ready 
$(function() { 
    $('#newRecipe').on('change', '[name=measurements]', function() { 
     console.log('send request with ', this.value); 
     // we'll use a $.getJSON() which is a shortened version of $.ajax() 
     // make a GET request to ajaxHandler.php?action=get_units&measurement={this.value} 
     $.getJSON('ajaxHandler.php', { action: 'get_units', measurement: this.value }, function (res) { 
      console.log('got response', res); 
      var html = ''; 
      // build list of options if any 
      if (!$.isEmptyObject(res.units)) { 
       $.each(res.units, function (unit) { 
        html += '<option>' + unit.name + '</option>'; 
       }); 
      } 
      // set list of options 
      $('[name=units]').html(html); 
     }); 
    }); 
}); 

应该是这样。您需要添加缺少的部分，例如包含PHP文件。

（如果你要保持你的当前设置，刚刚从ajaxHandler.php遵循一切并作出必要的调整。）