Change HTML element into text from database using AJAX / JQuery according to ID-CodePudding

I'm new to Jquery and ran into a problem in web development. I want to convert html element to paragraph from database based on id from url.

Here my code for now,

<script>
var url = window.location.pathname;
var id = url.substring(url.lastIndexOf('/')   1);

$(document).ready(function() {
    $("#desc").click(function() {
        $("#content").html(id);
        $(this).addClass('active');
        $("#feature").removeClass('active');
        $("#spec").removeClass('active');
    });
    $("#feature").click(function() {
        $("#content").html(id);
        $(this).addClass('active');
        $("#desc").removeClass('active');
        $("#spec").removeClass('active');
    });
    $("#spec").click(function() {
        $("#content").html(id);
        $(this).addClass('active');
        $("#desc").removeClass('active');
        $("#feature").removeClass('active');
    });
});
</script>

Here is the display that i wish

I've got the id, but don't know how to display data from the database (tbl_product) based on that id using AJAX / Jquery. I can only change the active class for now, all your advice and suggestions are will be very usefull.

CodePudding user response：

you can use ajax like this

$("#desc").click(function() {
    $(this).addClass('active');
    $("#feature").removeClass('active');
    $("#spec").removeClass('active');

    $.ajax({
        url: 'product.php?id='   id
        dataType: 'html',
        contentType: false,
        processData: false,
        beforeSend: function() {
            $('#content').empty();
        },
        error: function() {
            $('#content').append('error');
        },
        success: function(data) {
            $('#content').append(data);
        }
    })
});