使用php mysql jQuery链接选择


chained select with php mysql jQuery

我在 mvc 结构中链接选定的脚本时遇到问题我有表单视图,它包含以下内容:

<div class="col-md-6 col-md-offset-3">
  <form action="" method="post" role="form">
    <div class="form-group">
      <label>Nom de l'annonce:</label>
      <input class="form-control input-lg" type="text" name="reg_name">
    </div>
    <div class="form-group">
      <label>Choisi une catégorie:</label>
      <select id="first_drop" class="form-control input-lg" name="categories">
        <option disabled="disabled" selected="selected">choisi une categorie</option>
        <?php
          for ($i = 0; $i < count($dispalyCat); $i++) {
            echo'<option value="' . $dispalyCat[$i]['id'] . '">' . $dispalyCat[$i]['categorieName'] . '</option>';
          }
        ?>
      </select>
    </div>
    <span id="loading" style="display: none;">
      <img alt="Loading..." src="resources/images/loader.gif"/>
    </span>
    <div class="form-group" id="result" style="display: none">
      <label>Choisi une sou-catégorie:</label>
      <select id="second_drop" class="form-control input-lg" name="subCategories">
        <?php
          for ($i = 0; $i < count($dispalySubCat); $i++) {
            echo'<option>' . $dispalySubCat[$i]['subCategorieName'] . '</option>';
          }
        ?>
      </select>
    </div>
    <div class="form-group">
      <label>Prix:</label>
      <input class="form-control input-lg" name="reg_pass2" type="text"/>
    </div>
    <div class="form-group">
      <label>Surface:</label>
      <input class="form-control input-lg" name="reg_pass2" type="text"/>
    </div>
    <div class="form-group">
      <label>Description:</label>
      <textarea class="form-control input-lg"></textarea>
    </div>
    <div class="form-group">
      <label>Images:</label>
      <input type="file" value="Ajouter l'annonce" class="form-control input-lg" multiple="" />
    </div>
    <div class="form-group">
      <input type="submit" value="Ajouter l'annonce" class="btn btn-danger btn-lg" />
    </div>
    <input type="hidden" name="do" value="register"/>
  </form>
</div>

然后在控制器中操纵信息,这是代码:

<?php
  $display = new Display('categories');
  $dispalyCat = $display->getAllData();
  $func = $_POST['func'];
  $drop_val = $_POST['drop_val'];
  if (isset($_POST['drop_val'])) {
    $display2 = new Display('subcategories');
    $dispalySubCat = $display2->getAllDataFromParentId($drop_val, 'categorieId');
  } 
  include 'views/ajouterAnnonce.php';
?>

jquery脚本是:

$(document).ready(function () {
    "use strict";
    $('#loading').hide();
    $('#first_drop').change(function () {
        $('#loading').show();
        $('#result').hide();
        $.post('addAds.php',  {
        drop_val: $('select[name=categories]').val()
      }, function (response) {
          $('#result').fadeOut();
          setTimeout("finishAjax('result', '" + escape(response) + "')", 400);
      });
      return false;
  });
});
function finishAjax(id, response) {
    "use strict";
    $('#loading').hide();
    $('#' + id).html(unescape(response));
    $('#' + id).fadeIn();
}

当我测试此代码并从第一个选择中选择一个选项时,但我收到一条错误消息,即类显示在第 3 行(在第二个代码中)中找不到,尽管它在第一个选择中有效并向我显示数据库中的所有类别问题出在哪里?

问题分为两部分:

1.- 服务器端:

在你的文件中 php

<?php 
    // get values from url, because for a query from a select, is not necessary use request POST
    // then
    echo $.GET['value'];
    // Here you use queries or you do procedures for obtain data related with $.GET['value']
    // Last you return data on format Json
?>
// This file php, has a url, for example: get_data_select.php 
// Then whitout jquery or javascript, you should test the url, on the browser.
// http://somedomain/get_data_select.php?value=12
// If it return data with header json. server side works good.

2.- 客户端:您更改选择

$('#idselect').on("change", function(){
  var values = '?value=' + $('#idselect').val();
  $.get('http://somedomain/get_data_select.php' + values, function(res){
    console.log("response", res);
    callFunctionRender(res);
  });   
});

function callFunctionRender(data) {
 // here You have data from server
// then you should rendered
};