Solved

json data formats

Posted on 2013-06-15
1
354 Views
Last Modified: 2013-06-17
Hi experts,

I read that the $.getJSON function is a shorthand version of the $.ajax function.

So I'm trying to learn to write each of these 2 functions to call some json data.

So I created a Web Service called EmployeesWebService.asmx
This web service uses the Employees table of the Northwind sql server database.

Here is the code for it:

Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web
Imports System.Web.Script.Services
Imports System.Collections.Generic
Imports System.Runtime.Serialization
Imports System.IO
Imports System.Text

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ToolboxItem(False)> _
Public Class EmployeesWebService
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function HelloWorld() As String
        Return "Hello World"
    End Function

    ' This method returns a Json type.
    <WebMethod()> _
    <ScriptMethod(UseHttpGet:=False, ResponseFormat:=ResponseFormat.Json)> _
    Public Function GetEmployees() As List(Of Employee)

        Dim info As New List(Of Employee)()

        Dim mycon As SqlConnection
        mycon = New SqlConnection("Data Source=MYServer\SQLEXPRESS;Initial Catalog=Northwind;Integrated Security=True")
        mycon.Open()
        Dim query As String = "SELECT [EmployeeID],[LastName],[FirstName]  FROM [Northwind].[dbo].[Employees]"
        Dim cmd As New SqlCommand(query, mycon)
        'cmd.Parameters.AddWithValue("@id", id)

        Dim reader As SqlDataReader
        reader = cmd.ExecuteReader()
        While reader.Read()
            Dim b As New Employee()
            b.EmployeeID = reader.GetInt32(0)
            b.LastName = reader.GetString(1)
            b.FirstName = reader.GetString(2)
            info.Add(b)
        End While
        reader.Close()
        ' close the connection
        mycon.Close()

        Return info
    End Function

End Class

' Employee class
Public Class Employee
    ' Integer type
    Public Property EmployeeID() As Integer
        Get
            Return m_EmployeeID
        End Get
        Set(value As Integer)
            m_EmployeeID = value
        End Set
    End Property
    Private m_EmployeeID As String
    ' String type
    Public Property LastName() As String
        Get
            Return m_LastName
        End Get
        Set(value As String)
            m_LastName = value
        End Set
    End Property
    Private m_LastName As String
    ' String type
    Public Property FirstName() As String
        Get
            Return m_FirstName
        End Get
        Set(value As String)
            m_FirstName = value
        End Set
    End Property
    Private m_FirstName As String
End Class

Open in new window


When I run the service and click on the GetEmployees method  I get this:

GetEmployees method

Fetching json with $.Ajax function

So I created a asp page called EmployeesAjaxJson3WS.aspx

This is the code for it:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="EmployeesAjaxJson3WS.aspx.vb" Inherits="JSONExamples.EmployeesAjaxJson3WS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>example fetching JSON data using Ajax function</title>

    <!-- jQuery library reference. Latest is always referenced from jQuery's CDN. -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "EmployeesWebService.asmx/GetEmployees",
                beforeSend: function () {
                    $("#teamemployees").html("Loading...");
                },
                timeout: 10000,
                error: function (xhr, status, error) {
                    alert("Error: " + xhr.status + " - " + error);
                },
                data: "{}",
                dataType: "json",
                success: function (data) {
                    $("#teamemployees").html("");
                    $.each(data, function () {
                        $.each(this, function (key, value) {
                            $("#teamemployees").append(
                                "EmployeeID: " + value.EmployeeID + "<br>" +
                                "LastName: " + value.LastName + "<br>" +
                                "FirstName: " + value.FirstName + "<br><br>"
                            );
                        });
                    });
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

<div id="teamemployees"></div>

    </form>
</body>
</html>

Open in new window


When I run this page I get this:

using the $.ajax method
So by using the $.ajax method the json data from the web service is fetched correctly.



Fetching json with $.getJSON function

So now I'm trying to fetch the same json data from the same web service but this time I want to use the $.getJSON function.

So I created a page called EmployeesGetJson3WS.aspx

This is the code for it:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="EmployeesGetJson3WS.aspx.vb" Inherits="JSONExamples.EmployeesGetJson3WS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>example fetching JSON data using getJSON function.</title>

    <!-- jQuery library reference. Latest is always referenced from jQuery's CDN. -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.getJSON("EmployeesWebService.asmx/GetEmployees", function (data) {
                $.each(data, function () {
                    $.each(this, function (key, value) {
                        $("#teamemployees").append(
                            "EmployeeID: " + value.EmployeeID + "<br>" +
                            "LastName: " + value.LastName + "<br>" +
                            "FirstName: " + value.FirstName + "<br><br>"
                        );
                    });
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

    <div id="teamemployees"></div>

    </form>
</body>
</html>

Open in new window


But when I run this page I just get a blank page.

Am i missing something? Or did I write something wrong in the $.getJSON function?
Can someone help?
0
Comment
Question by:maqskywalker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39250070
Using $.ajax instead $.getJSON let you add lot of parameters
Check the docs to see the difference :
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/jQuery.getJSON/

Especially : contentType and error.
You can use $.ajaxSetup to set this parameter for $.getJSON BUT this will become the setup for every ajax call using shortcut jquery ajax method (not $.ajax : $.post, $.getJSON, $.get, $.load)

Currently you get an error on the client side but don't handling error so you can't notice it.
Check this usefull article :
http://encosia.com/using-jquery-to-consume-aspnet-json-web-services/

The parts : Additional security when calling JSON serialized services, How to make jQuery jump through these hoops
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question