从jQuery AJAX调用WCF服务方法返回404

Question

This is my jQuery AJAX method:

$(document).ready(function() {  
    $("#btnSubmit").click(function() {
        alert("Test");
        var param = $("#txtEmail").val();
        $.ajax({
            url:"~/DemoService1.svc/IsEmailAvailable",
            type: "POST", 
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            //data: JSON.stringify({ Email: $('#txtEmail').val() }),
            data: param,
            success: function(msg) { //On Successfull service call
                ServiceSucceeded(msg);
            },
            error: ServiceFailed    
        });
    });

    function ServiceFailed(result) {
        alert('Service call failed: ' + result.status + ' ' + result.statusText);
        Type = null;
        varUrl = null;
        Data = null; 
        ContentType = null;
        DataType = null;
        ProcessData = null;
    }
});

Here is my service interface.

[OperationContract]
[WebInvoke(UriTemplate = "/IsEmailAvailable", Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
bool IsEmailAvailable(string Email);

My webconfig is look like this:

<client>
    <endpoint address="http://localhost:56537/DemoService1.svc" binding="basicHttpBinding"
    bindingConfiguration="BasicHttpBinding_IDemoService1" contract="DemoService.IDemoService1"
    name="BasicHttpBinding_IDemoService1" />
</client>
<behaviors>
    <serviceBehaviors>
        <behavior name="ServiceBehaviour">
            <serviceMetadata httpGetEnabled="true" />
            <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
    </serviceBehaviors>
    <endpointBehaviors>
         <behavior name="EndBehaviour">
             <webHttp/>
         </behavior>
    </endpointBehaviors>
</behaviors>
<services>
      <service behaviorConfiguration="ServiceBehaviour" name="DemoService">
          <endpoint address="" binding="webHttpBinding" contract="IDemoService1" behaviorConfiguration="EndBehaviour"></endpoint>
      </service>
  </services>
<serviceHostingEnvironment multipleSiteBindingsEnabled="true" />

Please provide the solution. I am new in jQuery.

Answer 1

It looks like the issue is the URL in your AJAX call:

url:"~/DemoService1.svc/IsEmailAvailable",

Notice that you are beginning the URL with the tilde (~) character. The tilde is an ASP.NET token meaning "Application Root". JQuery doesn't know what this means, so the ajax call is going to something like " http://mysite/~/DemoService1.svc/IsEmailAvailable " which probably isn't a valid URL.

Replace the url parameter with a valid URL and the 404 will likely go away. Good tools for troubleshooting this are the developer console in your browser or Fiddler. I've found both to be invaluable when troubleshooting why client-side calls aren't working properly (trust me... you are going to deal with plenty of HTTP response codes, and you'll want a tool that allows you to view exception details).