How to modify url structure in jquery-CodePudding

I have created small dynamic page using jQuery. I passed data via query string http://localhost/website-new/category.html?id=19 but I want to do not come html extension because id is dynamically changing(ex:19,20,21) so I want structure of this url format http://localhost/website-new/category/19. Is possible in JQuery?

index.html:

async function New_Stores() {
    const newStores = await fetch('https://znap.app/api/v6/web/homepage', {
        method: 'POST',
        body: JSON.stringify({
            title: "React POST Request Example"
        }),
        headers: {
            "Content-Type": "application/json"
        },

    })
    const store_home = await newStores.json();

    const storeHome = store_home.sections.new_stores;
    console.log(storeHome)
    var htmlOutput = "";
    var orderInfo = storeHome.map(function (x) {
        htmlOutput  = "<div class='col-md-3' ><a href='category.html?id="   x.store_id   "'><div class='bg-info'>";
        htmlOutput  = "<img src="   x.logo   " class='img-fluid'/>";
        htmlOutput  = "<h2>"   x.store_name   "</h2>";
        htmlOutput  = "<p> Sample </p>";
        htmlOutput  = "<p>Upto AED "   x.cashback   "</p>";
        htmlOutput  = "</div></a></div>";
    });
    $("#what-new").append(htmlOutput); 
}
New_Stores();

category.html:

$(document).ready(function() {
    

        // Get Query String value id start
function getUrlParameter(attr) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i  ) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === attr) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
}
// Get Query String value id end




        var catgoryId = getUrlParameter("id");
        var catgoryIds = {
            "category_id": catgoryId
        };
        var data_id = JSON.stringify(catgoryIds);
        // alert(data_id)

        $.ajax({
            type: 'POST',
            url: 'https://znap.app/api/v6/web/category-details',
            dataType: 'json',
            data: data_id,
            contentType: 'application/json; charset=utf-8',
            success: function(callback) {
                var cat_page=callback.sections.category;
                var storeList=callback.sections.store_list;
                var store_li="";
                var store_li_map=storeList.map(function(x){
                    store_li ="<div class='boxs col-md-3 col-6' id='boxs-related'><div class='bg-info'> <img src=" x.store_images " class='relatedImg'/>";
                    store_li ="<p><span class='pull-left'>" x.store_name "</span><span class='pull-right'><i class'fa fa-star checked'></i><i class'fa fa-star checked'></i><i class'fa fa-star checked'></i><i class'fa fa-star'></i><i class'fa fa-star'></i></span></p>";
                    store_li ="<div class='summary'>" x.store_summary "</div>";
                    store_li ="<p class='category-deal'><span class=''><img src='images/deal.png'></span><span>" x.store_offer "</span></p></div></div>";
                });
                $('.cat-head h1').html(callback.sections.category.category_name);
                $('#related-store').html(store_li);
                $("#related-store .col-md-3").slice(0, 4).show();
                if(storeList.length<4){
                    $(".category-more").hide();
                }
                }
        });

        });

CodePudding user response：

use this :

ajax jquery

url: 'http://localhost/website-new/category/'   id,

CodePudding user response：

You need to change the .htaccces file

RewriteEngine On

# remove trailing slash
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([^/] )/$ http://example.com/folder/$1 [R=301,L]

# Redirect external .html requests to extensionless url
RewriteCond %{THE_REQUEST} ^(. )\.html([#?][^\ ]*)?\ HTTP/
RewriteRule ^(. )\.html$ http://example.com/folder/$1 [R=301,L]

# Resolve .html file for extensionless html urls
RewriteRule ^([^/.] )$ $1.html[L]

After, you can redirect without .html

<a href="/website-new/category/19">page</a>