Call WCF hosted in SharePoint from JQuery

Question

I created a WCF Service hosted in JQuery, when I navigate to the web service in browser and pass a parameter to it, I get back the data correctly, for example like this:

htp://server:6666/sites/test/_layouts/15/mycustomservice.svc/getitembyid(1)

I get back the item correctly, but when I do that in a webpart, I keep getting errors, he is the ascx for the webpart:

<input id="txtID" type="text" name="txtID" />
<input id="btnID" type="button" value="Get Item Name By ID" onclick="GetMyItem()" />
<script type='text/javascript'>
var txtValue = document.getElementById("txtID").value;

function GetMyItem() {

    $.ajax({
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
      url: 'htp://server:6666/sites/test/_layouts/15/mycustomservice.svc/getitembyid',
        data: '{"ID":"1"}',
        success: function (itemtitle) {
            alert(itemtitle);

        },
        error: function () {
            alert('There was an error');
            return;
        }

    });
}
</script> 

I keep getting: There was an error, any solution?

Answer 1

What does the JSON output look like?

Have you tried changing success to look like this?

success: function (item) {
            alert(item.title);

        }

Without knowing what the object looks like I cannot be sure but I suspect you are doing alert on the entire object, which calls toString on the object itself causing [object Object] to show in the alert box.

EDIT AFTER COMMENTS:

Since your service isn't actually serving JSON try this:

$.get('htp://server:6666/sites/test/_layouts/15/mycustomservice.svc/getitembyid(1)', function(data) {
  alert(data);
});

But you need to write your service so that it does serialize your objects to JSON. I assume the text is hard coded as just a demo? If so, have it send an object like this:

{ title: "my first item"} 

Edit based on SP SE chat conversation:

If the JSON looks like this: {"ID":"1","ItemTitle":"item 1"}

try this code:

function GetMyItem() {
//Notice I changed POST to GET and your URL
    $.ajax({
        type: 'GET',
        contentType: 'application/json',
        dataType: 'json',
        url: 'htp://server:6666/sites/test/_layouts/15/mycustomservice.svc/getitembyid(1)',
        success: function (data) {
            alert(data.ItemTitle);
        },
        error: function () {
            alert('There was an error');
            return;
        }

    });
}