How to pass a QueryString variable to jQuery Ajax

Question

I have Default.aspx

<asp:Button ID="showOrderbtn" runat="server" Text="ShowOrder"
            onclick="showOrderbtn_Click"/>

And in Default.aspx.cs

protected void showOrderbtn_Click(object sender, EventArgs e)
{
    var d = txtSearchCustomerByID.Value;
    Response.Redirect("Default2.aspx?id=" + d);
}

Here, I am having Customer Id in a textfield

Now, How can I pass "id" in jQuery Ajax in Default2.aspx.

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "Default2.aspx/showOrders",
        data: {ID:ID},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: Onsuccess,
        error: Onerror
    });
});

I need to have "id" in ready function of jQuery passed from Default.aspx.cs

I implemented showOrders in Default2.aspx.cs.

Thank You!!

Do you mean that you want to get it from url? If so get it from window.location.pathname — feeeper
– feeeper, Commented Sep 19, 2016 at 13:42
I want "id" supplied by Response.Redirect and want it in ready(function.. — Jay
– Jay, Commented Sep 19, 2016 at 13:47
Set the value of id in Hiddenfield from code behind page and retrieve its value in ready function. — Saurabh Srivastava
– Saurabh Srivastava, Commented Sep 19, 2016 at 14:37

Sunil Kumar · Accepted Answer · 2016-09-20 05:01:20Z

1

You can use below script for getting and setting query string values:

<script type="text/javascript">
        // Create a common method for getting querystring Parameter value from jQuery
        function getUrlVars() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for (var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

        $(document).ready(function () {
            var queryStringValue = getUrlVars()["id"];//Pass your Querystring parameter
            $.ajax({
                type: "GET",
                url: "Default2.aspx/showOrders",
                data: { ID: queryStringValue },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (successData) { },
                error: function (errorData) { }
            });
        });
    </script>

Hope it helps you.

Thanks

answered Sep 20, 2016 at 5:01

Sunil Kumar

3,2522 gold badges23 silver badges34 bronze badges

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

1 Comment

Sunil Kumar Over a year ago

Please upvote and mark solution if it helps you... Thanks :)

Syed Mhamudul Hasan · Accepted Answer · 2016-09-20 05:41:11Z

0

Why don't we pass the query string to web method and just the redirect to the page you want in aspx page .Lets have a look !!!

In *.aspx

<script>
        function getParameterByName(name) {
            var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
            return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
        }

        $(function() {
            //q=QueryString Name
            var id = getParameterByName('q');
            console.log(id);
            //if (id === null) {
            //     id = "test";
            //  }
            var data = JSON.stringify({ ID: id });
            $(document).ready(function () {
                $.ajax({
                    type: "POST",
                    url: "*.aspx/showOrders",
                    data: data,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(data) {
                        var d = data.d;
                        window.location = "Default2.aspx?id=" + d;
                    }
            });
            });
        });
    </script>

and in *.aspx.cs

[WebMethod]
public static String showOrders(String ID)
{
    //Do some work an logic here
    return ID;
}

and .aspx page Complete page

    <div>
        <asp:Button ID="showOrderbtn" runat="server" Text="ShowOrder"
             ClientIDMode="Static"/>
    </div>
    <script>
        function getParameterByName(name) {
            var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
            return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
        }

        $(function() {

            $('#showOrderbtn').on('click', function(e) {
                    e.preventDefault();
                    alert('In button click');
                    var id = getParameterByName('q');
                    console.log(id);
                    if (id === null) {
                        id = "test";
                    }
                    var data = JSON.stringify({ ID: id });
                    $.ajax({
                        type: "POST",
                        url: "IframeWithPowerBi.aspx/showOrders",
                        data: data,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            var d = data.d;
                            window.location = "Default2.aspx?id=" + d;
                        }
            });


        });
        });
    </script>

edited Sep 20, 2016 at 5:41

answered Sep 20, 2016 at 4:40

Syed Mhamudul Hasan

1,3392 gold badges17 silver badges46 bronze badges

3 Comments

Jay Over a year ago

I've not tried your solution yet!! But seems it quite correct!! Only the thing I want to ask - you are not making it on button click event, aren't you?? and what success function will do - Is it calling Default2.aspx ??

Jay Over a year ago

Can you please clarify me- what window.location = "Default2.aspx?id=" + d; will do ?

Syed Mhamudul Hasan Over a year ago

Yes....It well work for me....its a javascript function ....ADD <script>window.location = "Default2.aspx?id=" + 1; </script> and see for yourself

Collectives™ on Stack Overflow

How to pass a QueryString variable to jQuery Ajax

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related