jquery - JQuery AJAX Webmethod POST 接收对象
问题描述
我正在尝试序列化十几个输入并将其发布到 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
解决方案
从我可以得出的结论是,结果格式JQuery.serializeArray()
是[{"name":"firstName","value":"John"},{"name":"lastName","value":"Doe"}]
name : value 键对格式,它被 webmethod 拒绝。
webmethod 似乎只使用一种格式,其中键是类型属性名称,即:{"firstName":"John","lastName":"Doe"}
这有效并且可以毫无问题地填充我的类。
我偶然发现了Stackoverflow Link的另一篇文章,有人提供了一个格式函数,可以将 a$('#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
推荐阅读
- outlook - 是否可以合并 Outlook 规则?
- azure - 无法使用 docker-compose 文件将 docker 映像推送到 Azure 注册表容器
- entity-framework - 如何连接这两个实体
- palantir-foundry - Foundry 中是否有可以自动填充列描述的工具?如果是这样,它叫什么?
- spring-boot - Kotlin,SpringBoot(JPA)多个存储库的事务持久性问题
- python-3.x - 如何将 df.info() 转换为数据框。df.info()
- powershell - 如何对任务管理器的脚本进行 Powershell 以“无论用户是否登录都运行”
- tensorflow - 如何使用 tf.dataset 进行预测
- docker - 使用 Compose 运行时 Dockerfile 中的网络无法访问
- reactjs - 将 React 应用程序添加到 GitHub 上的现有文件夹