如何使用基于select标签的AJAX从数据库中检索数据?

时间:2017-08-21 22:38:36

标签: php ajax web-services

让我们假设我们有两个选择标签

pygame.init()
pygame.display.init
screen = pygame.display.set_mode([800, 600])
test = "space.ogg"
pygame.mixer.init(frequency=22050, size=-16, channels=2, buffer=4096)
pygame.mixer.music.load(path.join(snd_dir, 'space.ogg'))
pygame.mixer.music.play(test)
screen = pygame.display.set_mode((WIDTH, HEIGHT))
pygame.display.set_caption("My Game")
clock = pygame.time.Clock()

数据库上的两个表

TABLE_1

combox_1_db_id PK

combox_1_db_description

TABLE_2

combox_2_db_id PK

combox_1_db_id FK

combox_2_db_description

现在我想向PHP发送一个AJAX请求,其中包含在combobox_1中选择的选项的值,以根据combobox_1_id填充数据库中的combobox_2记录。

JS

<select id='combobox_1'>
   <option value='1'>Description of fist record</option>
   <option value='2'>Description of second record</option>
</select>

<select id='combobox_2'></select>

PHP

$('#combobox_1').on('change', function() {
  var option_value = $('#combobox_1').find('option:selected').val();

   $.ajax({
    url: '/get_records',
     method: 'GET',
     dataType: 'JSON',
    success: function(data) {   
        $(data).each(function() {
            var option = $('<option />');
             option.attr('value', 
             this.combox_2_id).text(this.combox_2_description); 
             $('#combobox_2').append(option);
        });
    },
    error: function() {
        console.log('Error on loading records');
    }
});
});

但是我没有找到将ID发送到PHP的方法,所以我可以根据该ID获取记录并将它们加载到combobox_2中,任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

您可以在ajax中发送option_value,只需将其包含为此类数据......

$('#combobox_1').on('change', function() {

// get the id of the selected option
var id = $(this).children(":selected").attr("id");

$.ajax({
    url: '/get_records',
     method: 'GET',
     dataType: 'JSON',
     data: {combox_1_id: id},  // send the id in the request
    success: function(data) {   
        $(data).each(function() {
            var option = $('<option />');
             option.attr('value', 
             this.combox_2_id).text(this.combox_2_description); 
             $('#combobox_2').append(option);
        });
    },
    error: function() {
        console.log('Error on loading records');
    }
});
});