JQuery AJAX Webmethod POST 接收对象
Posted
技术标签:
【中文标题】JQuery AJAX Webmethod POST 接收对象【英文标题】：JQuery AJAX Webmethod POST receiving an object 【发布时间】：2018-11-18 16:09:20 【问题描述】：我正在尝试序列化十几个输入并将其发布到 ASP.Net webmethod。
我的问题不是手动反序列化 JSON 字符串并填充对象类，这可以自动完成吗？我将收到一个对象而不是对象列表。
我已经尝试了好几天来完成这项工作，但没有成功，搜索了很多帖子，但没有找到任何明显的例子。抱歉，如果我的信息过多，只是想涵盖所有内容。
感谢任何帮助、想法或方向。
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");
);
;
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"]
Owner 类的片段（属性与 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 试图填充我的所有者类，而不必将所有属性都包含为方法变量（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
【问题讨论】：
尝试将 myowner 用双引号括起来，例如data: "\"myOwner\": " + JSON.stringify(formData) + "",。此外，在 webmethod 中，输入参数数据类型应为 List(Of Owner)或 IEnumerable(Of Owner)`
感谢@Mohsin 的回复，我仍然有问题，最终得到了 12 个属性为空的 Owner 类。有任何想法吗？新的 JSON 字符串看起来像 "myOwner": ["name":"prefix","value":"","name":"address1"...
为了测试，您可以创建一个只有两个属性name 和value 的新类，然后将参数数据类型更改为该新类的ListOf。看看有没有帮助
我对 ListOf 迷路了，因为它是具有 13 个属性的单个对象，而不是对象列表。当我按照 ListOf 的建议更改 web 方法时，我得到的 ListOf 对象的长度与我在 JSON 字符串中发送的键数量完全相同，并且所有对象都是空的。似乎是来自 stringify 函数的 JSON 格式导致它无法正确反序列化到对象中。
您是否尝试过按照我之前评论中的建议创建一个只有两个属性的新类？
【参考方案1】：
据我所知，JQuery.serializeArray() 的结果格式导致["name":"firstName","value":"John","name":"lastName","value":"Doe"] name : value 密钥对格式被 webmethod 拒绝。
webmethod 似乎只使用一种格式，其中键是类型属性名称，即："firstName":"John","lastName":"Doe" 这可以正常工作并毫无问题地填充我的类。
我在*** 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
简单类
Public Class OwnerTest
Public Property firstName As String
Public Property lastName As String
End Class
【讨论】：
以上是关于JQuery AJAX Webmethod POST 接收对象的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery Ajax 将参数传递给 WebMethod
使用 jquery ajax 在 ascx 页面中调用 webmethod
通过jquery ajax将json对象传递给webmethod
如何使用 AJAX (jquery) 将嵌套的对象数组传递和接收到 c# WebMethod 中？