首页 文章

将复杂类型作为数据传递给jquery ajax post

提问于
浏览
2

我的数据模型类如下所示:

[DataContract]
public class Order
{
    [DataMember]
    public string Id { get; set; }
    [DataMember]
    public string AdditionalInstructions { get; set; }
    [DataMember]
    public double TotalAmount { get; set; }
    [DataMember]
    public DateTime OrderDate { get; set; }
    [DataMember]
    public Customer Customer { get; set; }
    [DataMember]
    public OrderedProduct OrderedProduct { get; set; }
}
[DataContract]
public class OrderedProduct
{
    [DataMember]
    public int Id { get; set; }
    [DataMember]
    public string Name { get; set; }
    [DataMember]
    public double Price { get; set; }
    [DataMember]
    public int Quantity { get; set; }
}
[DataContract]
public class Customer
{
    [DataMember]
    public string FirstName { get; set; }
    [DataMember]
    public string LastName { get; set; }
}

我的WCF运营 Contract 是:

[WebInvoke(ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)]
[OperationContract]
string SaveOrder(Order order);

我的ajax调用看起来像:

function SaveOrder() {
    var orderJson = {
        AdditionalInstructions: $("span:first").text(),
        Customer: { FirstName: $("#firstName").val(), LastName: $("#lastName").val() },
        OrderedProduct: { Id: $("#productList").val(), Quantity: $("#quantity").val() }
        };

    // the post to your webservice or page
    $.ajax({
        type: "POST", //GET or POST or PUT or DELETE verb
        url: "http://localhost:14805/OrderService.svc/SaveOrder", // Location of the service
        data: orderJson, //Data sent to server
        contentType: "application/json; charset=utf-8", // content type sent to server
        dataType: "json", //Expected data format from server
        processdata: false, //True or False
        success: function (result) {//On Successfull service call
            alert(result);
        },
        error: function (result) {// When Service call fails
            alert('Service call failed: ' + result.status + ' ' + result.statusText);
        }
    });
}

但是当我拨打这个电话时,我得到一个400:错误的请求状态 . 这就是Google Chrome中 Headers 的样子:

Request URL:http://localhost:14805/OrderService.svc/SaveOrder
Request Method:POST
Status Code:400 Bad Request
Request Headers
Accept:application/json, text/javascript, */*; q=0.01
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:165
Content-Type:application/json; charset=UTF-8
Host:localhost:14805
Origin:http://localhost:14805
Referer:http://localhost:14805/index.html
User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.127 Safari/534.16
X-Requested-With:XMLHttpRequest
Request Payload
AdditionalInstructions=dbl-click+here+to+add+notes!&Customer%5BFirstName%5D=asdf&Customer%5BLastName%5D=fdsa&OrderedProduct%5BId%5D=3&OrderedProduct%5BQuantity%5D=12
Response Headers
Cache-Control:private
Connection:Close
Content-Length:1647
Content-Type:text/html
Date:Mon, 07 Mar 2011 19:14:57 GMT
Server:ASP.NET Development Server/10.0.0.0
X-AspNet-Version:4.0.30319

请让我知道如何纠正这个问题 .

谢谢,阿伦

1 回答

  • 4

    解决这个问题有两个问题 . 1.我的服务本身有一些错误(这是我的错)2 . 我对orderJson对象做了JSON.stringify() .

    function SaveOrder() {
        var orderJson = {
            AdditionalInstructions: $("span:first").text(),
            Customer: {
                FirstName: $("#firstName").val(),
                LastName: $("#lastName").val()
            },
            OrderedProduct: {
                Id: $("#productList").val(),
                Quantity: $("#quantity").val()
            }
        };
    
        // the post to your webservice or page
        $.ajax({
            type: "POST", //GET or POST or PUT or DELETE verb
            url: "http://localhost:14805/OrderService.svc/SaveOrder", // Location of the service
            data: JSON.stringify(orderJson), //Data sent to server
            contentType: "application/json; charset=utf-8", // content type sent to server
            dataType: "json", //Expected data format from server
            processdata: false, //True or False
            success: function (result) {//On Successfull service call
                RedirectToMvcApp(result);
            },
            error: function (request, error) {// When Service call fails
                alert('Service call failed: ' + request.status + ' ' + request.statusText);
            }
        });
    }
    

相关问题