从jquery Ajax调用WCF服务

I am trying to create a WCF service and call its methods using jquery AJAX. So far I have not being able to figure out how to do it. I have read some of the solutions given in SO but still unable to fix it. Any help would be appreciated. I have the following code.

我正在尝试创建一个WCF服务并使用jquery AJAX调用它的方法。到目前为止，我还无法弄清楚如何去做。我已经阅读了SO中给出的一些解决方案，但仍然无法修复它。任何帮助，将不胜感激。我有以下代码。

In WCF service.

在WCF服务中。

Service Contract

服务合同

[ServiceContract]
public interface IDatingService
{
[WebInvoke(Method = "POST",
RequestFormat= WebMessageFormat.Json,
        ResponseFormat = WebMessageFormat.Json,
        BodyStyle = WebMessageBodyStyle.Wrapped,
        UriTemplate = "/AddUser")]
    [OperationContract]
    User AddUser(User user);
}

Implementation

履行

public User AddUser(User user)
{
    return userRepository.Add(user);
}

The configuration

配置

<system.serviceModel>
 <behaviors>
  <serviceBehaviors>
    <behavior name="DatingServiceBehavior">
      <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />
      <serviceDebug includeExceptionDetailInFaults="false" />
    </behavior>
  </serviceBehaviors>
  <endpointBehaviors>
    <behavior name="DatingServiceBehavior">
      <webHttp/>
    </behavior>
  </endpointBehaviors>
</behaviors>
<services>
  <service behaviorConfiguration="DatingServiceBehavior"
           name="DatingService.Service.DatingService">
    <endpoint address="" binding="webHttpBinding"
       contract="DatingService.Service.IDatingService"
       behaviorConfiguration="DatingServiceBehavior"/>
    <endpoint contract="IMetadataExchange" binding="mexHttpBinding" address="mex" />
  </service>
 </services>
</system.serviceModel>

From the client side, I use the following code to call the service.

从客户端，我使用以下代码来调用该服务。

saveInfo: function () {
    console.log('saveInfo');
    if ($('#terms-check').is(":checked")) {
        if (app.validateEmail()) {
            var input =
                {
                    "user":
                    {
                        "LoginId": user.LoginId.text(),
                        "Password": user.Password.text(),
                        "Email": user.Email.val()
                    }
                };
            $.ajax({
                type: "POST",
                url: "http://localhost:36908/DatingService.svc/AddUser",
                data: JSON.stringify(input),
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                success: app.onSaveSuccess,
                error: app.onSaveError
            });
        }
        else {
            $('.error-label').text('Invalid email address.');
        }
    }
    else {
        $('.error-label').text('Please check the terms and conditions.');
    }
}

When I call the service, I am getting Bad Request.

当我打电话给服务时，我收到了错误请求。

2 个解决方案

#1

Issue can be related to "localhost:36908", you need to make sure your service is started and hosted on same port, you can go to WCF project properties and select "Use Visual studio developer server", check on "Specific Port" option and write 36908 in it, then start development server or debug start the solution, Try hitting the url again.

问题可能与“localhost：36908”有关，您需要确保您的服务已启动并托管在同一端口上，您可以转到WCF项目属性并选择“使用Visual Studio开发人员服务器”，选中“特定端口”选项并在其中写入36908，然后启动开发服务器或调试启动解决方案，尝试再次点击该URL。

#2

You should construct objects like this.You are getting 400 Bad request because the wcf expects data in a format which ajax is not sending.

你应该构造这样的对象。你得到400 Bad请求，因为wcf需要ajax没有发送的格式的数据。

var obj = {};
obj.LoginId = user.LoginId.text();
obj.Password = user.Password.text();
obj.Email =  user.Email.val();

var jsonObj=JSON.stringify(obj);
var dataToSend = '{"user":'+jsonObj+'}';

Then change your data part in ajax query

然后在ajax查询中更改数据部分

       $.ajax({
                type: "POST",
                url: "http://localhost:36908/DatingService.svc/AddUser",
                data: JSON.stringify({user:obj}),
    or
                data: dataToSend,
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                success: app.onSaveSuccess,
                error: app.onSaveError
            });

#1

#2