Ajax选择并自动加载数据

时间:2017-09-04 06:51:18

标签: javascript php jquery ajax

我的表格:

<form>
  <select id="f_name"><?php echo $fname ?></select>
  <select id="l_name></select>
</form>

我的剧本:

$(document).ready(function(e){
  $("#f_name").change(function(){
    var fname = $('this').val();
    $.ajax({
      type :'POST',
      data :{name:fname},
      url   :"fullname.php",
      success : function(data){
        $('#l_name').html(data);
      }     
    });
  });
});

我的fullname.php

$db = mysqli_connect("localhost", "root", "", "test");
if(isset($_POST['name'])){
  $f_name = $_POST['name'];
  $sql = mysqli_query($db, "SELECT last_name FROM fullname WHERE first_name = '$f_name'");
  $res = mysqli_fetch_array($sql);
  echo $res;
}

当我选择名字时,姓氏不会出现。

2 个答案:

答案 0 :(得分:1)

表单的形成不正确:

<form>
  <select id="f_name"><?php echo $fname ?></select>
  <select id="l_name></select>
</form>

应该是:

<form>
  <select id="f_name">
    <option><?php echo $fname ?></option>
  </select>
  <select id="l_name></select>
</form>

你的脚本应该是这样的:

$(document).ready(function(e){
  $("#f_name").change(function(){
    var fname = $('this').val();
    $.ajax({
      type :'POST',
      data :{name:fname},
      url :"fullname.php",
      success : function(data){
        $('#l_name').html('<option>'+data+'</option>');
      }   
    });
  });
});

答案 1 :(得分:0)

$(document).ready(function(e){
  $("#f_name").change(function(){
    var fname = $('this').val();
    $.ajax({
      type :'POST',
      data :{name:fname},
      url :"fullname.php",
      success : function(data){    
        for (i in data) {                        
          $("#l_name").html("<option>'+data[i]+'</option>");
        }
      }   
   });
  });
});