Getting error on passing argument to the code behind method using jquery ajax

Question

I don't know what's wrong with this code. I am not able to implement it properly. Thanks in advance for help. This is what I've tried so far and stuck

<script type="text/javascript">
            $(document).ready(function () {
                for (var key in localStorage) {
                    GetQuickVL(key);
                }
            });
            function GetQuickVL(key) {
                if (key.substring(0, 4) == "vhs-") {
                    $.ajax({
                        type: "POST",
                        url: "/QuickViewList.aspx/GetQuickVD",
                        data: '{key: ' +'1' + '}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: OnSuccess,
                        failure: function (response) {
                            alert(response.response);
                        },
                        error: function (response) {
                            alert(response.error);
                        }
                    });
                }
            }
            function OnSuccess(response) {
                alert('df');
            }
</script>

and the C-Sharp code is

[WebMethod]
public int GetQuickVD(int key)
{
    return key;
}

Answer 1

key is an int . You've passed it as a string :

'{key: ' +'1' + '}',

Either do:

{key: 1 },

Or make your web method take an object or string as its parameter:

[WebMethod]
public int GetQuickVD(object key)
{
    return Convert.ToInt32(key);
}

Here is a complete working sample (I just tested this). Adapt to suit your needs:

WebService:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)] 
[System.Web.Script.Services.ScriptService] // <- ** MAKE SURE THIS IS UNCOMMENTED!
public class WebService1 : System.Web.Services.WebService
{
    [WebMethod]
    public int GetQuickVD(int key)
    {
        return key;
    }
}

Aspx page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.foo').click(function () {
            $.ajax({
                type: "POST",
                url: "WebService1.asmx/GetQuickVD",
                data: '{key: ' + '1' + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () {
                    alert("success");
                }
            });
        })
    });
</script>
<a href="#" class="foo">click me</a>

Answer 2

if the method is in your code behind (.aspx.cs file) try declaring the GetQuickVD method as static. so it's public static int GetQuickVD(int key).