Question

我的页面上有一个datalist，它显示了我的数据库中的多个行作为选项。我希望用户能够选择datalist中的一个选项，以及页面从数据库中获取该特定事物的其余信息，并更改页面上的HTML以输出该信息。我知道有一种方法可以做到这一点而不需要重新加载页面，就像你必须使用PHP一样，如果你使用AJAX。我不知道怎么回事。有什么帮助吗？

Answer 1

查看此参考资料http://api.jquery.com/jquery.ajax/ 使用jQuery很容易（jQuery是一个JavaScript框架）

$.ajax({
     type: "GET",
     url: 'test.php',
     data: {"type":"check"},
     success: function(response){
         console.log(response);
         //This is your content you get from your php file, now you can assign it to html using jQuery
         $('p.print').html(response);
     }
});

Datalist意味着你有一个选择框？所以在这样的事情中调用ajax请求：

$('select').on('change', function() {
   $(this).val(); //Get the option which was selected
   //Ajax request here regarding to the selected option
});

Answer 2

我们的想法是在您的datalist上触发javascript更改事件时向服务器发送ajax请求以获取数据。假设您正在使用jQuery：

$('SELECTOR_FOR_DATALIST').on('change', function() {
    var record_id = $(this).val(); // this gets the value of your selected data
    var data = {
        'id': record_id
    };

    $.ajax({
        type: "GET",
        url: 'endpoint.php', // this is your endpoint for server side processing
        data: data,
        success: function(response) {
            // here's where you'll handle a successful response from the server
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // handle error response here
        }
    });
});

动态获取数据库中的信息

2 个答案: