使用jQuery .get在URL中显示参数

Question

When using a GET request on a form in regular HTML we get the variables within the URL. Is there a Jquery way to sent variables like this by clicking a button? I have been looking into Jquery .get but i can't get my parameters to show up in the URL.

Following does not load the page and add to URL, it just runs the code with specified parameters.

$.get( "home.php", { name: "menyo" } );

So i am looking for a way to do this in a clean Jquery way. It is because i have many buttons that do various Jquery things and i do not want to create a form for each one with their own get request while i automated buttons with button classes using custom attributes in the HTML.

Answer 1

What you have to do is to create a method that will find all inputs in given form and prepare a JSON Object with key value pair.

something like that

function getFormJson(formId) {
    var jsonObject = {};
    $("form#" + formId).find("input").each(function (i, item) {
        jsonObject[item.attr("name")] = item.val();
    });
    return jsonObject
}

Answer 2

To move the location of the window I believe you can do something like this:

window.location.href = "home.php?name=menyo";

Otherwise I'd look into checking out pushState, which will change the URL of a page without actually taking you there.

pushState docs:

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_pushState().C2.A0method

Otherwise, you can use classic AJAX

$("#button").click(function(){
    $.ajax({
        type: "GET",
        url: "where/you/need/the/variables.php",
        data: { 
            "name" : "menyo"
        },
        success: function(data){
            // data is the returned output of the page
        }
    });
})