使用ajax向json子对象提交值答案

【问题标题】：Submit value to json child object using ajax使用ajax向json子对象提交值
【发布时间】：2020-07-22 19:33:43
【问题描述】：

我在 html 页面中有一个表单。我想使用 ajax 向以下 api 提交值。

{
    "userName": "john",
    "description": "funny dood",
    "address": 
        {
            "addressLine1": "house number from formdata",
            "addressLine2": "some value picked from form",
            "daDa": "some val from form"
        }
    
}

我正在使用以下sn-p使用jquery ajax提交给api：

function AjaxSubmit(form_Data){
var ajaxOptions =
    {
        type:"POST",
        contentType: "multipart/form-data",        
        url: "/api/Users/",
        data: form_Data,
        success: function (result) {
            alert(result);
            window.location.href = "/Home/Index"
        }
    }

    if ($(form_Data).attr('enctype') == "multipart/form-data") {
        ajaxOptions['contentType'] = false;
        ajaxOptions['processData'] = false;
    }

    $.ajax(ajaxOptions);
    return false;
}

问题是如何将地址值传递给地址对象内的各个字段。该 api 建立在 .net 核心之上，仅供参考。谢谢:)

【问题讨论】：

如果我做对了，你需要从表单的不同字段中检索数据，然后将它们放入一个 JS 对象中，如下所示：var un = $('#userNameInput').val(); ...; apiData = {userName:un, description: desc, address: {addressLine1: al1, ... }};，然后发送序列化对象。
是的。由于它的内部形式，我将所有领域作为一个整体。然后序列化并传递给上面提到的方法ajaxsubmit()。

标签： jquery asp.net ajax

【解决方案1】：

你的问题是如何使用JS获取对象form_Data？

也许这是你的问题：

var form_Data = {};
var userName = ${'#some_id1').val();
var description = ${'#some_id2').val();
var addressLine1 = ${'#some_id3').val();
var addressLine2 = ${'#some_id4').val();
var daDa = ${'#some_id5').val();
form_Data['userName'] = userName;
form_Data['description'] = description;
form_Data['address'] = {};
form_Data['address']['addressLine1'] = addressLine1;
form_Data['address']['addressLine2'] = addressLine2;
form_Data['address']['daDa'] = daDa;

【讨论】：

谢谢兄弟 :) 使用相同的代码，但在我的情况下使用了 $('input[name=nameValue]').val()。

【解决方案2】：

参数名称是控制器中的变量。

function AjaxSubmit(form_Data){
var ajaxOptions =
    {
        url: "/api/Users/",
        type:"POST",        
        data: JSON.stringify({parametername: form_Data}), 
        contentType: 'application/json; charset=utf-8',
        success: function (result) {
            alert(result);
            window.location.href = "/Home/Index"
        }
    }

    if ($(form_Data).attr('enctype') == "multipart/form-data") {
        ajaxOptions['contentType'] = false;
        ajaxOptions['processData'] = false;
    }

    $.ajax(ajaxOptions);
    return false;
}

【讨论】：