Home/ Questions/Q 7716045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T02:32:18+00:00

Not sure what I’m doing wrong but I can’t get my JQuery AJAX call

  • 0

Not sure what I’m doing wrong but I can’t get my JQuery AJAX call to pass the variable properly. It recieves it just fine. I’m probably overlooking something minor. Thanks.

(Also, is there any way to pass data this way without using a [WebMethod] or via the URL?)

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {   
            $('#button').click(function(){
            var json_obj = "{'" + $('#t1').val() + "' : '" + $('#p1').val() + "', '" + $('#t2').val() + "' : '" + $('#p2').val() + "'}";

                $.ajax({
                    type: "POST",
                    url: 'Default.aspx/test',
                    contentType: 'application/json; charset=utf-8',
                    data: "thisisatest",//json_obj,
                    dataType: 'json',
                    success: function(msg) {
                    //$('#result').html(msg.d);
                        alert(msg.d)
                    },
                    error: function(msg) {
                    //$('#result').html(msg.d);
                        alert(msg.d + " err")
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div>
        Type: 1: <input type="text" id="t1" />
        Property 1: <input type="text" id="p1" />
        <br /><br />
        Type 2: <input type="text" id="t2" />
        Property 2: <input type="text" id="p2" />
        <input type="button" value="Add object!" id="button" />
        <br /><br />
        <div id="result"></div>
    </div>
</body>
</html>

Code Behind

    [WebMethod]
    public string test(string json)
    { 
        return json;
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a full example I wrote for you to illustrate the concept:

    <%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Services" %>
<script type="text/C#" runat="server">

    public class MyModel
    {
        public string T1 { get; set; }
        public string P1 { get; set; }
        public string T2 { get; set; }
        public string P2 { get; set; }
    }

    [WebMethod]
    public static string Test(MyModel obj)
    {
        return "Hello from test";
    }
</script>

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    Type: 1: <input type="text" id="t1" />
    Property 1: <input type="text" id="p1" />
    <br /><br />
    Type 2: <input type="text" id="t2" />
    Property 2: <input type="text" id="p2" />
    <input type="button" value="Add object!" id="button" />
    <br /><br />
    <div id="result"></div>

    <script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $('#button').click(function () {
            var data = JSON.stringify({
                obj: {
                    t1: $('#t1').val(),
                    p1: $('#p1').val(),
                    t2: $('#t2').val(),
                    p2: $('#p2').val()
                }
            });
            $.ajax({
                url: 'default.aspx/test',
                type: 'POST',
                contentType: 'application/json',
                data: data,
                success: function(result) {
                    $('#result').html(result.d);
                }
            });
            return false;
        });
    </script>
</body>
</html>

    I have mixed here the code behind and the markup in the same Default.aspx file but obviously you could have them separate if you prefer.

    • 0