$.ajax() POST command not connecting to WCF service

https://stackoverflow.com/questions/13693463

04-12-2021
|

Question

I am able to connect to the service using a simple form POST, but $.ajax method does not work and I get an error: "No transport"

The interface/contract:

[ServiceContract]
public interface IService1
{

    [OperationContract]
    Msg updateMessageJSON(Msg message);
}

The datacontract and data members:

[DataContract]
public class Msg{
    [DataMember]
    public string GUID;

    [DataMember]
    public string message;
}

The service class:

public class Service1 : IService1
 [WebInvoke(
    Method = "POST",
    ResponseFormat = WebMessageFormat.Json,
    RequestFormat = WebMessageFormat.Json,
    BodyStyle = WebMessageBodyStyle.Bare,
    UriTemplate = "updateMessageJSON"
    )]
    public Msg updateMessageJSON(Msg message)
    {
        using (masterEntities1 entx = new masterEntities1())
        {
            entx.AddToErrorMessageDatas(
                    new ErrorMessageData() { messageData = message.message }
                );
            entx.SaveChanges();
        }

        message.GUID = Guid.NewGuid().ToString();
        return message;
    }

Configuration file:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <appSettings>
    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="true" />
  </system.web>
  <system.serviceModel>
    <services>
      <service name="JSONServiceTest.Service1">
        <host>
          <baseAddresses>
            <add baseAddress="http://localhost:8733/Design_Time_Addresses/JSONServiceTest/Service1/" />
          </baseAddresses>
        </host>
        <endpoint address="" binding="basicHttpBinding" contract="JSONServiceTest.IService1">
          <identity>
            <dns value="localhost" />
          </identity>
        </endpoint>
        <endpoint address="json" binding="webHttpBinding" contract="JSONServiceTest.IService1" behaviorConfiguration="jsonBehavior"></endpoint>
        <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
      </service>
    </services>
    <behaviors>
      <serviceBehaviors>
        <behavior>
          <serviceMetadata httpGetEnabled="True" httpsGetEnabled="True" />
          <serviceDebug includeExceptionDetailInFaults="False" />
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="jsonBehavior">
          <webHttp />
        </behavior>
      </endpointBehaviors>
    </behaviors>
  </system.serviceModel>
</configuration>

jQuery:

function exec() {
        $.ajax({
            url: "http://localhost:8733/Design_Time_Addresses/JSONServiceTest/Service1/json/updateMessageJSON",
            type: 'POST',
            data: "{ 'message':'get the new guid','GUID':''}",
            contentType: "application/json; charset=utf-8",
            success: function (msg) {
                alert(msg);
            },

            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError.responseText);
            }
        });
    }

Solution

That's probably because you're doing cross-site scripting, assuming that http://localhost:8733 is not also the address of your page (ports make a difference).

Use JSONP instead. Your response should be something like:

myCallback(['your data structure here'])

Where myCallback() is a valid function in your JavaScript. The $.ajax call needs this as well:

dataType: 'jsonp'