CODEWITHSUNDEEP
jqueryajaxweb-services
user2431114
user2431114

Reputation: 361

how to display json data in div from webservice through jquery

I have made a getdata webmethod which returns the data

    function GetService() {
       debugger;
//        var prod = $('#txt_num1').val();
//        var price = $('#txt_num2').val();
//        var active = $('#txt_num3').val();

        $.ajax({
            type: "POST",
            url: "WebService1.asmx/getdata",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnError,
        });

        function OnSuccess(data, status) {
            $("#lblResult").removeClass("loading");
            $("#lblResult").html($.parseJSON(data.d));
        }

        function OnError(request, status, error) {
            $("#lblResult").removeClass("loading");
            $("#lblResult").html(request.statusText);

        }
    }

Where am I going wrong? How can i display data from the webservice through jquery in div?

Upvotes: 0

Views: 3702

Answers (1)

Cristi Pufu
Cristi Pufu

Reputation: 9095

Serialize your response: 

            [WebMethod]
            public HttpResponseMessage getdata()
            {
                string conn = "Data Source=.\\sqlexpress; initial catalog=Test; user id=sa; pwd=manager;"; 
                SqlConnection connection = new SqlConnection(conn); 
                connection.Open(); 
                SqlDataAdapter da = new SqlDataAdapter("Select * from PRODUCT", connection); 
                DataSet dt = new DataSet(); 
                da.Fill(dt); 
                connection.Close();

                var resp = new HttpResponseMessage()
                {
                    Content = new StringContent(new JavaScriptSerializer().Serialize(dt))
                };
                resp.Content.Headers.ContentType = new MediaTypeHeaderValue("application/json");

                return resp;
            }

JS:

function OnSuccess(data) {
            console.log(data);
        }

function OnError(request, status, error) {
            console.trace();
        }

function GetService() {

        $.ajax({
            type: "POST",
            url: "WebService1.asmx/getdata",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnError,
        });
}

Upvotes: 1

Related Questions