Jquery to ashx not working event not fired

Question

I am using the below code to call a ashx page. But it's not working for me. I have place my code here. I always got the error message message "Request Failed". Please help me..

<script type="text/javascript">
        function CallLoginHandler(user, pass) {
            alert(user);//Got value
            alert(pass);//Got Value
            $(function(){
            $.ajax({
                type: "POST",
                url: "../handler/JQGridHandler.ashx?MainPage=GetUserDetails&Type=2&user=" + user + "&pass=" + pass + "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnComplete,
                error: OnFail
            });

            return false;
            });
        }

        function OnComplete(result) {
            alert([result.Id, result.Name, result.Age, result.Department]);
        }
        function OnFail(result) {          
            alert('Request Failed');
        }

    </script>

Answer 1

remove these lines:

 $(function(){  // <----remove this

        return false; // and this
        });  // and this too

Update to this function:

function CallLoginHandler(user, pass) {
        $.ajax({
            type: "POST",
            url: "../handler/JQGridHandler.ashx", // updated url
            data: { // pass your data like this since type is post
                 MainPage:"GetUserDetails",
                 Type:2,
                 user:user,
                 pass:pass
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnComplete,
            error: OnFail
        });
    }

and also your url is not correct:

url: "../handler/JQGridHandler...... + pass + "", 
// --here you have a blank `""` after pass-----^

and since your type: "post" so you can pass the data like this:

data: {
  MainPage:"GetUserDetails",
  Type:2,
  user:user,
  pass:pass
},

Answer 2

Separate your string into a javascript object to be encoded and sent to the server as JSON based on your content type. Also, get rid of $(function(){ in your function call, it's useless here.

$.ajax({
    type: "POST",
    url: "../handler/JQGridHandler.ashx';
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: {
        MainPage: 'GetUserDetails',
        Type: 2,
        user: user,
        pass: pass
    }
    success: OnComplete,
    error: OnFail
});

If this doesn't work, then the issue is likely one of the following:

1. The URL address is wrong
2. The server is evaluating a GET as opposed to a POST request
3. The server expects, application/x-www-form-urlencoded but you've declared it's json
4. You have a routing issue

Answer 3

Note: Do not send your user and pass in query string.

function CallLoginHandler(user, pass) {
$.ajax({
        type: "POST",
        url: "../handler/JQGridHandler.ashx",
        data: {
                  MainPage: 'GetUserDetails',
                  Type: 2,
                  user: user,
                  pass: pass
        },
        // DO NOT SET CONTENT TYPE to json
        // contentType: "application/json; charset=utf-8",
        // DataType needs to stay, otherwise the response object
        // will be treated as a single string
        dataType: "json",
        success: OnComplete,
        error: OnFail
    });

}); }

Your handler.ashx file

using System;
using System.Web;
using Newtonsoft.Json;

public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string user= context.Request.Form["user"];
        //.....  
        var wrapper = new { d = myName };
        // in order to use JsonConvert you have to download the
        // Newtonsoft.Json dll from here  http://json.codeplex.com/
        context.Response.Write(JsonConvert.SerializeObject(wrapper));
    }

    public bool IsReusable
    {
       get
       {
            return false;
       }
    }
}

source