How to send query string parameters during jQuery AJAX GET operation

by Jagadish Pulakhandam on 10/30/2012 8:16:10 AM
Rated 0 from 0 votes
Brief: Demonstrates on sending query string parameters (including object notation) during jQuery AJAX GET operation
Posted to: Ajax programming using JQuery - Tutorials/Videos
Add to DiggAdd to del.icio.usAdd to FURLAdd to RedditAdd to YahooAdd to BlinklistAdd to GoogleAdd to ma.gnoliaAdd to ShadowsAdd to Technorati

Attached Source code/video demonstrates the following:
  • How to send querystring parameters during a jQuery based AJAX GET request
  • How to send object as querystring parameters
  • How to use "data" property of jQuery AJAX operation ($.ajax)

Source Code:

CalcSum.aspx.vb - parses querystring provided by jQuery AJAX request and sends back the result

01.Public Class CalcSum
02.    Inherits System.Web.UI.Page
03. 
04.    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
05.        Dim sum As Integer = 0
06.        For Each param As String In Request.QueryString
07.            Dim v As Integer
08.            If Integer.TryParse(Request(param), v) Then
09.                sum += v
10.            End If
11.        Next
12. 
13.        Threading.Thread.Sleep(3000) 'intentional for ajax wait demo
14. 
15.        'emit pure/plain text excluding any autogen html
16.        Response.Clear()
17.        Response.ClearHeaders()
18.        Response.AddHeader("Content-Type", "text/plain")
19.        Response.Write(sum)
20.        Response.Flush()
21.        Response.End()
22. 
23.    End Sub
24. 
25.End Class

Following .htm uses jQuery AJAX GET operation to fetch the result based on the server logic described above:

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03.<head>
04.    <title></title>
05.    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
06.    <script type="text/javascript">
07. 
08.        //get operation with a query string
09.        function GetSumOfNumbers() {
10.            $.ajax({
11.                url: "/CalcSum.aspx",
12.                data: {a: "10", b: "20", c: "30"},
13.                success: function (data) {
14.                    //place the response in "results" div
15.                    $("#results").html("Sum = " + data);
16.                },
17.                error: function (err) {
18.                    alert("wrong URL or data could not be retrieved: " + err.statusText);
19.                }
20.            });
21.        }
22. 
23.        //method 2
24.        function GetSumOfNumbers2() {
25.            $.ajax({
26.                url: "/CalcSum.aspx",
27.                data: "a=10&b=20&c=30",
28.                success: function (data) {
29.                    //place the response in "results" div
30.                    $("#results").html("Sum = " + data);
31.                },
32.                error: function (err) {
33.                    alert("wrong URL or data could not be retrieved: " + err.statusText);
34.                }
35.            });
36.        }
37. 
38.    </script>
39.</head>
40.<body>
41.    <input type="button" value="Show Sum" onclick="GetSumOfNumbers2();" /><br>
42.    <div id="results">
43.    </div>
44.</body>
45.</html>




Join the .NET Code Central Community and join the discussion!
Signing-up is FREE and quick. Do it now, we want to hear your opinion
0

Rated 0 from 0 votes ( login  to rate)
DotnetKicks DotnetKicksDe DotNetShoutout

Attachments / Source Code
You need to Login or Join for FREE to download the following