How to modify url structure in jquery

Question

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();
                }
                }
        });

        });

Could you please provide more details?

Ajay Gupta
– Ajay Gupta

2022-03-07 06:06:46 +00:00
Commented Mar 7, 2022 at 6:06 — Ajay Gupta
– Ajay Gupta, Commented Mar 7, 2022 at 6:06
Hi Ajax added some information above.

Simple Design
– Simple Design

2022-03-07 06:12:46 +00:00
Commented Mar 7, 2022 at 6:12 — Simple Design
– Simple Design, Commented Mar 7, 2022 at 6:12

DIR · Accepted Answer · 2022-03-07 06:27:19Z

1

use this :

ajax jquery

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

answered Mar 7, 2022 at 6:27

DIR

5711 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Simple Design Over a year ago

Page 404 found localhost/znap-website-new/category/19

DIR Over a year ago

please use this one ' localhost/znap-website-new/category' + id,

Simple Design Over a year ago

I followed your instruction but 404 found page could you please change my above index, category.html file please. thanks

DIR Over a year ago

@SimpleDesign sorry my mistake please use 'http://localhost/website-new/category/' + catgoryIds

DIR Over a year ago

@SimpleDesign and can you tell me what is log of id catgoryIds means please use inspect which value store in categoryids

Ajay Gupta · Accepted Answer · 2022-03-07 06:23:02Z

0

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>

answered Mar 7, 2022 at 6:23

Ajay Gupta

8617 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to modify url structure in jquery

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related