JQuery AJAX Webmethod POST 接收对象

Question

我正在尝试将十几个输入序列化，然后 post 将其序列化为 ASP.Net 网络方法。

我的问题不是手动反序列化 JSON 字符串并填充对象 class 这可以自动完成吗？我将收到单个对象而不是对象列表。

我已经尝试了好几天来完成这个但没有成功，搜索了很多 posts 但没有找到任何明显的例子。抱歉，如果我试图涵盖所有内容，信息过多。

感谢任何帮助、想法或指导。

JQuery

            function pushOwnerData(formData) {  //formData is array of inputs
            // [used for debug purposes]
            //var test = "{owner: " + JSON.stringify(formData) + "}";
            // JSON.stringify({ formData: formData })
            //{ myOwner: JSON.stringify(formData) },
            // [end debug tinkering]
            var request = $.ajax({
                url: 'records_v1.2.aspx/UpdateOwnerInfo',
                method: "POST",
                data: "{myOwner: " + JSON.stringify(formData) + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });
            request.done(function (r) {
                console.log('success');
            });
            request.fail(function (jqXHR, textStatus) {
                console.log("pushOwnerData Request failed: " + textStatus);
            });

        }


        function editOwnerDialog() {
            var ownerDiv = getOwnerContent();
            $(ownerDiv).dialog({   
                modal: true,
                draggable: false,
                resizable: false,
                show: 'fold',
                hide: 'blind',
                width: 500,
                height: 350,
                dialogClass: 'ui-dialog-osx',
                title: "Edit Owner",
                buttons: {
                    "Save Changes": function () {
                        if (validateOwnerData()) {
                            // serialize to an array to be passed to a webmethod
                            var fields = $(".divTableBody").find("select,textarea,input").serializeArray();
                            var id = $('.owner_detail').find('.id').html();
                            fields.push({ name: "id", value: id });
                            // [used for debug purposes]
                            // var jsonFields = JSON.stringify(fields); 
                            // var test = $(".divTableBody").find("select,textarea,input").serialize(); 
                            // var jsonTest = JSON.stringify(test); 
                            // [end debug tinkering]
                            var result = pushOwnerData(fields);
                        } else {
                            return false;
                        }
                    },
                    "Cancel": function () {
                        $(this).dialog("destroy");
                    }
                },
                open: function () {
                    // create a mask for phone class
                    $('#owner_phone').mask("(999) 999-9999");
                },
                close: function () {
                    $(this).dialog("destroy");
                }

            });
        };

Ex JSON 数据

[{"name":"prefix","value":""},{"name":"address1","value":"1234 Stone Mountain Rd"},{"name":"first","value":"Amy"},{"name":"address2","value":"Suite 18"},{"name":"middle","value":"Marie"},{"name":"city","value":"atlanta"},{"name":"last","value":"Smith"},{"name":"state","value":"GA"},{"name":"suffix","value":""},{"name":"postalcode","value":"65472"},{"name":"phone","value":"(850) 775-3131"},{"name":"email","value":"baba@hotmail.com"},{"name":"id","value":"2501"}]

所有者截图 class（属性与 json 键同名）

    Private _id As Integer
    <DataMember()>
    Public Property id() As Integer
        Get
            Return _id
        End Get
        Set(ByVal value As Integer)
            _id = value
        End Set
    End Property

    Private _last As String
    <DataMember()>
    Public Property last() As String
        Get
            If Not _last = "" Then
                _last = Microsoft.VisualBasic.StrConv(_last, VbStrConv.ProperCase)
            End If
            Return _last
        End Get
        Set(ByVal value As String)
            _last = value
        End Set
    End Property

    Private _first As String
    <DataMember()>
    Public Property first As String
        Get
            If Not _first = "" Then
                _first = Microsoft.VisualBasic.StrConv(_first, VbStrConv.ProperCase)
            End If
            Return _first
        End Get
        Set(ByVal value As String)
            _first = value
        End Set
    End Property

Webmethod 试图填充我的所有者 class 而不必将所有属性包含为方法变量（ByVal 首先作为字符串，...等），这可能吗？

我也试过 (ByVal myOwner as List(of Owner)) 也调用了方法，但我最终得到了一个空对象列表，长度为 JSON 变量

    <WebMethod()> _
Public Shared Function UpdateOwnerInfo(ByVal myOwner As Owner) As String
    Dim result As Boolean = False
    'ToDo
    Return result
End Function

Answer 1

从我可以得出的结论是 JQuery.serializeArray() 的结果格式导致 [{"name":"firstName","value":"John"},{"name":"lastName","value":"Doe"}] 名称：值密钥对格式被 web 方法拒绝。

Web 方法似乎只使用一种格式，其中键是类型属性名称，即：{"firstName":"John","lastName":"Doe"} 这有效并毫无问题地填充我的 class。

我在这里 post 偶然发现了另一个 Whosebug Link，有人提供了一个格式函数，可以将 $('#mydiv').serialize() 转换为可以被 webmethod 使用的 json 字符串.不确定是否有更好的方法，或者我的经验不足导致将方块推过圆孔，但这对我有用。

完全披露：

HTML

<form id="form1" runat="server">
<div class="myForm">
    First name: <input type="text" class="first" name="firstName" />
    Last name: <input type="text" class="last" name="lastName" />
</div>
<button id="go">
    Go</button>
</form>

JQuery

jQuery(document).ready(function ($) {


    $("#go").click(function () {
        //var formData = { firstName: 'John', lastName: 'Doe' };
        var formData = $(".myForm").find("input").serialize();
        pushOwnerData(formData);
    });

    function pushOwnerData(formData) { 
        var json1 = "{\"formData\":" + toSimpleJson(formData) + "}";    
        var request = $.ajax({
            url: 'testJSON.aspx/UpdateOwnerInfo',
            method: "POST",
            data: json1,
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        });
        request.done(function (r) {
            alert('success');
        });
        request.fail(function (jqXHR, textStatus) {
            alert("pushOwnerData Request failed: " + textStatus);
        });

    }


    function toSimpleJson(serializedData) {
        var ar1 = serializedData.split("&");
        var json = "{";
        for (var i = 0; i < ar1.length; i++) {
            var ar2 = ar1[i].split("=");
            json += i > 0 ? ", " : "";
            json += "\"" + ar2[0] + "\" : ";
            json += "\"" + (ar2.length < 2 ? "" : ar2[1]) + "\"";
        }
        json += "}";
        return json;
    }
});

网络方法

Imports System.Data
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient

Partial Class testJSON
    Inherits System.Web.UI.Page

        <WebMethod()> _
        Public Shared Function UpdateOwnerInfo(ByVal formData As OwnerTest) As String
            Dim result As Boolean = False

            Return result
        End Function
End Class

简单class

Public Class OwnerTest
    Public Property firstName As String
    Public Property lastName As String
End Class

JQuery AJAX Webmethod POST 接收对象

JQuery AJAX Webmethod POST receiving an object

asp.net

ajax

jquery

webmethod