使用php mysql jQuery链接选择

时间:2014-12-12 22:20:23

标签: php jquery mysql ajax

我的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 个答案:

答案 0 :(得分:0)

将问题分为两部分:

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
};