jQuery AJAX form serialization example

25 05 2009

By Stephen Trembath

Just a quick example of using jquery to submit form data without a postback which may (or may not!) be of interest…

It is useful in this case because the page is very big (the page to process a lead/ticket), and we want to avoid doing post-backs wherever possible. It finds all elements in the pnlChecklist panel which have an attribute named ‘metaid’, e.g. <asp:DropdownList runat=”Server” metaid=”Spyware risk” />. It submits the data as a serialized string (metaid1=value1&metaid2=value2) to a very basic code-behind page, which splits and saves the data, and then returns a script for evaluation on the client-side. It’s pretty heavily snipped to make it a little clearer.

Client-side:

<a href="javascript:;" onclick="DoAudit();">Send System Audit to Customer</a>

function DoAudit() {
            var id = $('#<%=Me.hiddenSupportRequestID.ClientID%>').val();
            var serialized = '';
            $('#<%=Me.pnlChecklist.ClientID%> [metaid]').each(
            function() {                 
               var attrib = $(this).attr("metaid");
               serialized += attrib + "=" + $(this).val() + "&";
            }
            );
            $.get(ajaxUrl, { method: 'getaudit', supportrequestid: id, data: serialized }, function(data) {
                // Handle the response
                eval(data);
            });
            return false;
        }

Server-side:


        SecureSession.ValidateOrRedirect()
        Select Case Request.QueryString("method")
            Case "getaudit"
                        Dim data As String = Request.Params.Get("data")
                        Dim htData As Hashtable = AjaxUtils.SplitSerializedPostData(data)
                        ......
                End Select
                Dim script As String = "alert('Test');"
                Response.Write(script)
       End Select


Actions

Information

One response

25 05 2009
Joe Cincotta

It should be noted that the SecureSession class is part of the Pixolüt libraries and does not really affect the example code here. SecureSession is just a user session management layer.

In this code example above, we validate the user session before processing the AJAX request.

Leave a comment