JQuery中用Ajax的POST方式与WCF交互

最新推荐文章于 2024-09-10 11:33:20 发布

cqulyk

最新推荐文章于 2024-09-10 11:33:20 发布

阅读量1.2k

点赞数

分类专栏： WCF

本文链接：https://blog.csdn.net/cqulyk/article/details/48211711

版权

WCF 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

服务协定代码:

在OperationContract中用RequestFormat=WebMessageFormat.Json指定请求数据格式为Json，用ResponseFormat=WebMessageFormat.Json指定返回格式为Json，用Method="POST"指定提交方式为POST。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;

namespace WCF_AjaxService
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IAjaxService" in both code and config file together.
    [ServiceContract]
    public interface IAjaxService
    {
        [OperationContract]
        [WebInvoke(Method="POST",
            RequestFormat=WebMessageFormat.Json,
            ResponseFormat=WebMessageFormat.Json,
            BodyStyle=WebMessageBodyStyle.Wrapped)]
        User CreateJsonUser(int id, string name, string address, string phoneNumber);


        [OperationContract]
        [WebInvoke(Method = "POST",
            RequestFormat = WebMessageFormat.Json,
            ResponseFormat = WebMessageFormat.Xml,
            BodyStyle = WebMessageBodyStyle.Wrapped)]
        User CreateXmlUser(int ID, string name, string address, string phoneNumber);
    }
}

服务实现代码:<pre name="code" class="csharp">using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;
using System.ServiceModel.Activation;

namespace WCF_AjaxService
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "AjaxService" in code, svc and config file together.
    // NOTE: In order to launch WCF Test Client for testing this service, please select AjaxService.svc or AjaxService.svc.cs at the Solution Explorer and start debugging.
 
    public class AjaxService : IAjaxService
    {
        public User CreateJsonUser(int id, string name, string address, string phoneNumber)
        {
            return new User() { ID=id, Address= address, Name = name, PhoneNumber = phoneNumber};
        }

        public User CreateXmlUser(int id, string name, string address, string phoneNumber)
        {
            return new User() { ID = id, Address = address, Name = name, PhoneNumber = phoneNumber };
        }
    }
}

配置文件代码:

其中绑定类型必须为webHttpBinding方式才能支持Ajax访问，且必须在在endpoint behavior 中设置WebHttp节点。

<pre name="code" class="html"><?xml version="1.0"?>
<configuration>

  <system.web>
    <compilation debug="true" targetFramework="4.0" />
  </system.web>
  <system.serviceModel>
    
    <behaviors>
      <serviceBehaviors>
        <behavior>
          <!-- To avoid disclosing metadata information, set the value below to false before deployment -->
          <serviceMetadata httpGetEnabled="true"/>
          <!-- To receive exception details in faults for debugging purposes, set the value below to true.  Set to false before deployment to avoid disclosing exception information -->
          <serviceDebug includeExceptionDetailInFaults="false"/>
        </behavior>
      </serviceBehaviors>

      <endpointBehaviors>
        <behavior name="webHttpBindingBehaviors">
          <webHttp />
        </behavior>
      </endpointBehaviors>
    </behaviors>

    <services>
      <service name="WCF_AjaxService.AjaxService">
        <endpoint address="MyAjaxService" binding="webHttpBinding" contract="WCF_AjaxService.IAjaxService" behaviorConfiguration="webHttpBindingBehaviors"></endpoint>
      </service>
    </services>
    
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
  </system.serviceModel>
 <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <!--
        To browse web app root directory during debugging, set the value below to true.
        Set to false before deployment to avoid disclosing web app folder information.
      -->
    <directoryBrowse enabled="true"/>
  </system.webServer>

</configuration>

前端HTML代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function ()
        {
            $("#btnGetJsonUser").click(function ()
            {
                $.ajax(
                {
                    type: "POST",
                    url: "AjaxService.svc/MyAjaxService/CreateJsonUser",
                    data: JSON.stringify({ "id": "3", "name": "Newton", "address": "Chongqing", "phoneNumber": "13366482727" }),
                    dataType: "json",
                    contentType: "application/json",
                    processdata:true,
                    success: function (msg) {
                        alert("good!!!");
                        $("#txtResponse").text(msg.CreateJsonUserResult.PhoneNumber);
                    },
                    error: function (msg) {
                        alert("shit!!!");
                    }
                });
            });


            
        });
    </script>
</head>
<body>
    <button id="btnGetJsonUser">JSON</button>
    <button id="btnGetXmlUser">XML</button>
    <br />
    <br />
    <textarea id="txtResponse"></textarea>
</body>
</html>