JQuery Ajax Post

JQuery Ajax Post

JQuery Ajax Post data.

Many times as a web developer, you come across requirement to call the server side methods efficiently without doing post back. Here we will see how to use JQuery Ajax to post data on server. We will use Asp.net web site page and client side JQuery.

You can insert the JQuery library in your web project or let it get downloaded by client using Google hosted CDN version of JQuery.

This is the first and very basic tutorial on JQuery Ajax call. Data can be posted from client to server by using HTTP Get or Post methods.

You can use such a technique to check user name exists in data base or user name is available without doing post back.

Below is the server side method which will return username parameter passed by user and score.

[System.Web.Services.WebMethod]
 public static string GetCurrentTime(string name)
 {
   return "Hello " + name + Environment.NewLine + "The Current Time is: "
       + DateTime.Now.ToString();
 }

You can write this method in http handler or inside a page.

HTML Source:

<div>
            Name :
            <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
            <asp:TextBox ID="score" runat="server"></asp:TextBox>
            <input id="Button1" type="button" value="Get My Score" />
        </div>

Jquery Ajax call server side method.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

        $("#Button1").click(function(){

            var username = $("#<%=txtUserName.ClientID%>").val();
            var score = $("#<%=score.ClientID%>").val();

                $.ajax({
                type: "POST",
                url: "Jquery_Tutorial.aspx/GetServerSideTime",
                data: "{userName: '" + username+ "',score:'"+ score + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: GetResponse,
                failure: function(response) {
                         alert(response.d);
                         }
                });
        });
});

        function GetResponse(response) {
                alert(response.d);
        }
        
</script>

Note:

  1. The server side method you are trying to call needs to be a public static.
  2. The parameter we have passed to method are case sensitive.

Look at the Url parameter of Ajax, here we are appending the url with name of method.

We are passing parameter to the method using data: Parameters are separated with comma.

Data flows in and out over HTTP as JSON (Java simple notification object).

We have used C#.net as a programming language. You can also write same method in VB.net as well.

Tags:

Jquery Ajax TutorialBasics of jqueryLearning JqueryJQuery Animate Div Height and WidthJQuery SlidePostback from JavaScriptJquery Trim StringHttpWebRequest Post methodGoogle JQuery CDNAsp.net JQuery Calendar ControlHow to call function in JQuery

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.