如何通过在javascript中传递实体来制作post方法ajax调用?

时间:2010-08-17 09:45:32

标签: javascript ajax wcf rest

我需要发布ajax请求,其中我需要将实体类作为参数传递。

例如:

[OperationContract]
    [WebInvoke(Method = "POST",
           BodyStyle = WebMessageBodyStyle.Wrapped,
           ResponseFormat = WebMessageFormat.Json
    )]
    public bool SaveEmployee(Employee employee)
    {
        //inserting the data to database.
    }

这里我的实体类是Employee,它有2,3个属性暴露,比如empId,employeename和age。

我需要从javascript传递这些信息。

   function SaveEmployee() {

var employeename='test';
var age=23;
var empid=34534;
//these data's i need to pass to the ajax method.
        var am = new Proxy();
        am.invoke("SaveEmployee", { **here how can i pass my entity Employee?** }, function(response){
             if (response) {

我可以在javascript中执行类似的操作吗?

var employee=new Employee();
employee.Name=employeename;
employee.Age=age;
employee.EmpId=empid;
and  am.invoke("SaveEmployee", { "Employee":employee },

1 个答案:

答案 0 :(得分:0)

这是我放在一起的示例,它将实体POST到WCF REST服务(在客户端使用jQuery)。如果你没有使用jQuery,我想你仍然会看到如何处理它。

这是HTML& JavaScript的:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
    Name: <input type="text" id="name" /><br />
    Desc: <input type="text" id="desc" /><br />
    <button id="submit">Send!</button>

    <script type="text/javascript">
        $(function () {
            $("#submit").click(function (e) {
                e.preventDefault();
                var theData = {};
                theData["Name"] = $("#name").val();
                theData["Desc"] = $("#desc").val();
                $.ajax({
                    type: "POST",
                    url: "ProdService.svc/product/add",
                    data: JSON.stringify(theData),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (data) {
                        alert(data);
                    },
                    error: function (e, t, x) {
                        alert(t);
                    }
                });
            });
        });
    </script>
</body>
</html>

需要注意的关键是我将请求的内容类型设置为application/json。这是WCF的关键所以它知道发送了什么。

我的服务定义如下:

[OperationContract]
[WebInvoke(Method="POST", ResponseFormat=WebMessageFormat.Json, RequestFormat=WebMessageFormat.Json,
    BodyStyle=WebMessageBodyStyle.Bare, UriTemplate="product/add")]
String AddProduct(Product p)
{
    return "Got " + p.Name;
}

我的实体是这样的:

[DataContract]
public class Product
{
    [DataMember()]
    public String Name { get; set; }
    [DataMember()]
    public String Desc { get; set; }
}

我的web.config设置如下:

<system.serviceModel>
    <behaviors>
        <endpointBehaviors>
            <behavior name="WebApplication2.ProdServiceAspNetAjaxBehavior">
              <webHttp />
            </behavior>
        </endpointBehaviors>
    </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
        multipleSiteBindingsEnabled="true" />
    <services>
        <service name="WebApplication2.ProdService">
            <endpoint address="" behaviorConfiguration="WebApplication2.ProdServiceAspNetAjaxBehavior"
                binding="webHttpBinding" contract="WebApplication2.ProdService" />
        </service>
    </services>
</system.serviceModel>

web.config中的关键是我的endpointBehavior使用webHttp而不是enableWebScript。除此之外,这几乎是一种开箱即用的配置。

所以关键是我的有效负载是一个转换为JSON化字符串的JavaScript对象字面值。我的服务期望请求格式为JSON,并且由于我的Product类使用DataMemberDataContract属性进行修饰,因此它可以将我的有效负载反序列化为Product类实例

我希望这会有所帮助。如果您有其他问题,请告诉我,我会相应更新我的答案。