Javascript ajax 将动态创建的 json 对象传递给 Web 服务

Posted

技术标签:

【中文标题】Javascript ajax 将动态创建的 json 对象传递给 Web 服务【英文标题】:Javascript ajax passing dynamically created json object to a web service 【发布时间】:2018-01-14 10:22:54 【问题描述】:

我有一个带有对象参数的网络服务函数,

来自控制器的功能

 public string Post([FromBody]LoanApplication value)
            
                LoanApplicationDAO appDAO = new LoanApplicationDAO();
                string res = "";
                res = appDAO.ReleaseLoanApplication(value);
                if (res == null)
                
                    throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.NotFound));
                
                return res;
            

LoanApplication 包含

public class LoanApplication
    
        public string AccountAddress  get; set; 
        public string AccountName  get; set; 
        public string AccountNumber  get; set; 
        public string AccountTag  get; set; 
        public string ApplicationNumber  get; set; 
        public string ApplicationType  get; set; 
        public string Approver  get; set; 
        public string BSPTagging  get; set; 
        public string BuyOutAmount  get; set; 
        public string CIFKey  get; set; 
        public string ClassificationEconomicActivity  get; set; 
        public string ClassificationSizeOfFirm  get; set; 
        public string CoMaker1  get; set; 
        public string CoMaker2  get; set; 
        public string CoMakerName1  get; set; 
        public string CoMakerName2  get; set; 

        public string CreditLimit  get; set; 
        public string DateGranted  get; set; 
        public string DepEdDivision  get; set; 

        public string DepEdEmployeeID  get; set; 
        public string DepEdRegion  get; set; 
        public string DepEdStation  get; set; 
        public string Disbursement  get; set; 
        public string DocStamps  get; set; 
        public string DOSRIField  get; set; 
        public string EmailAddress  get; set; 
        public string FirstPaymentDate  get; set; 
        public string GroupCode  get; set; 
        public string GroupName  get; set; 
        public string Insurance  get; set; 
        public string InterestRate  get; set; 
        public string KnockedOffAccountNumber  get; set; 
        public string KnockedOffAmount  get; set; 
        public string LandlineNumber  get; set; 
        public string LoanAmount  get; set; 
        public string LPOCode  get; set; 
        public string Maker  get; set; 
        public string MaturityDate  get; set; 
        public string MobileNumber  get; set; 
        public string MonthlyAmort  get; set; 
        public string MothersMaidenName  get; set; 
        public string NDaysDiscount  get; set; 
        public string NoOfInstall  get; set; 
        public string PaymentFrequency  get; set; 
        public string PayOutMode  get; set; 
        public string PEPTagging  get; set; 
        public string Product  get; set; 
        public string Purpose  get; set; 
        public string Security  get; set; 
        public string ServiceFees  get; set; 
        public string SourceOfPayment  get; set; 
        public string SpouseMobileNumber  get; set; 
        public string SpouseName  get; set; 
        public string Term  get; set; 
        public string AOUserID  get; set; 
        public string AOName  get; set; 
        public string LSOCode  get; set; 
        public string IsBranch  get; set; 

当我使用 VS 2012 的调试模式时,LoanObj accountname and accountnumer 为空,但是当我从 ajax 检查我的传递值时它有值,从谷歌浏览器控制台检查它

来自 ajax jsonObj: AccountName:"test name", AccountAddress: "test address", etc.. 的值的示例格式

我的 ajax 函数

$('body').on('click', '#btnSubmit', function () 
                var jsonObj = ;
                $('#lfs_form tbody input[type="text"]').each(function () 
                    jsonObj[this.id] = this.value;
                );
                var req2 =
                    $.ajax(
                    type: 'post',
                    url: '../lfsapi/loanapplication/',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    data: JSON.stringify(
                        jsonObj
                        //AccountAddress: jsonObj['AccountAddress']
                    )
                );

                req.error(function (request, status, error) 
                    alert(request.responseJSON['Message']);
                );

                req.done(function (data) 

                );

            );

但是当我尝试时

data: JSON.stringify(
 AccountName: jsonObj['AccountName'],
AccountNumber: jsonObj['AccountNumber']
)

它可以工作,并成功地将预期值传递给函数,我的示例只有 2 个对象,但在我的真实代码中,我有 40 多个对象,这就是我尝试使用循环的原因..任何人都知道我该如何解决这个问题?

谢谢

附加代码,用于填充我的表单

$.ajax(
                type: 'get',
                url: '../lfsapi/loanapplication/',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json'
            );

            req.error(function (request, status, error) 
                alert(request.responseJSON['Message']);
            );

            req.done(function (data) 
                var toappend = '';
                $.each(data, function (key, val) 
                    toappend += '<tr>';
                    toappend += '<td>' + val + '</td><td><input style="width:500px;" type="text" id=' + val + ' /></td>';
                    toappend += '</tr>';
                );
                toappend += '<tr><td align="right" colspan="2"><button id="btnSubmit" type="button">Submit</button></td></tr>';
                $('#lfs_form tbody').append(toappend);
            );

【问题讨论】:

SyntaxErrordata: JSON.stringify(jsonObject)jsonObject 已经是一个对象,你实际上是在调用 JSON.stringify();。去掉多余的大括号... 同时尝试检查 jsonObj 是否有任何值,看起来你的选择器不正确$('#input[type="text"]') 你有很多 ID 为input 的输入吗?但正如@Crowes 所说,开始从JSON.stringify 调用中删除额外的 @Crowes,我更新了我的代码,它只是拼写错误..谢谢 @sdu9 我还是看到了。 @Crowes,谢谢先生通过数据解决了它:JSON.stringify(jsonObject)... 【参考方案1】:

我注意到你的代码中有几个错误:

首先,您使用 jsonObj[this.id] 为对象赋值 成员。所以 this.id 应该是 AccountNameAccountNumber 否则 不会为所需的成员赋值。

其次,从 JSON.stringify 中删除额外的括号 并像这样使用

JSON.stringify( json对象 );

【讨论】:

【参考方案2】:

解决问题

data: JSON.stringify(jsonObject)

谢谢大家

【讨论】:

以上是关于Javascript ajax 将动态创建的 json 对象传递给 Web 服务的主要内容,如果未能解决你的问题,请参考以下文章

JS原生AJAX

js学习

js原生实现ajax

两种动态加载JavaScript文件的方法

AJAX技术是啥,和JS有啥区别?

Rails 动态 javascript 加载