如何使用 jquery ajax 将表单数据插入 Web 服务答案

【问题标题】：how to insert form data into a web service with jquery ajax如何使用 jquery ajax 将表单数据插入 Web 服务
【发布时间】：2015-11-13 08:11:16
【问题描述】：

我正在尝试将 Ionic 移动应用与已部署的 Web 服务进行映射。

我想插入表单数据，以便可以通过 .NET asmx Web 服务在数据库中对其进行更新。 ajax代码如下：

    $.ajax({
        url: 'http://localhost:5096/AndroidWebService.asmx/InsrtTblEmp', type: "POST",
        contentType: "application/json",
        data: //what to do here?,
        dataType: "json",
        success: function (result) {
            var jEl = $("#divMessage");            
            jEl.html(result.d).fadeIn(1000);
            setTimeout(function () { jEl.fadeOut(1000) }, 5000);
        },
        error: function (xhr, status) {
            alert("An error occurred: " + status);
        }
    });

这是 asmx 网络服务的代码：

    [WebMethod]
    //public string InsrtTblEmp(int EmpId, string LeaveType, DateTime DateFrom, DateTime DateTo, float? LeaveDays, string Remarks)
    public string InsrtTblEmp(TblEmpLeaveDat TblEmpDat)
    {
        string msg ="";
        try
        {
            var obj = new tblEmpLeave()
            {
                EmpId = TblEmpDat.EmpId,
                LeaveAvailType = TblEmpDat.LeaveAvailType,
                DateFrom = TblEmpDat.DateFrom,
                DateTo = TblEmpDat.DateTo,
                LeaveDays = TblEmpDat.LeaveDays,
                Remarks = TblEmpDat.Remarks
            };
            Db.tblEmpLeaves.Add(obj);
            Db.SaveChanges();

            msg = "Record insert successfully";
        }
        catch(Exception ex)
        {
            msg = ex.Message;
        }

        return msg;
    }
}

现在据我了解，Web 服务只接受对象数据类型。第一个问题：我可以在 jquery 中创建对象吗？

按原样使用此 Web 服务会更有效吗？或者我应该修改它以便它采用硬编码的字符串值而不是对象。

任何帮助将不胜感激。

【问题讨论】：

如果你传入 tblEmpLeaveDat 类型的 tblEmpLeaveDat，是否有理由创建 obj，而不仅仅是使用传入的对象？
网络服务代码不完整，可能是通过其他方法传递的..让我检查一下。并感谢您的帮助！我确实觉得我已经取得了一些进展，虽然我仍然在 ajax 的错误部分结束
您可以尝试使用我在下面显示的代码，但手动将已知值设置到属性中。这将检查代码是否通过了 ajax 调用中的值。您还可以使用 Fiddler 来检查调用。这将显示在 ajax 调用中传递的内容：telerik.com/fiddler
我认为现在的问题在于弄清楚如何将 ajax 字符串作为对象传递给 Web 服务
这显示在我下面的答案中，我在其中创建 var formData = {...};然后在 ajax 数据属性中传递 formData。

标签： jquery ajax web-services ionic asmx

【解决方案1】：

如果表单中的字段名称与模型中的字段名称相同，则可以这样做：

var frm = $(document.myform);
var formData = JSON.stringify(frm.serializeArray());

$.ajax({
    url: 'http://localhost:5096/AndroidWebService.asmx/InsrtTblEmp', 
    type: "POST",
    contentType: "application/json",
    data: formData,
    dataType: "json",
    success: function (result) {
        var jEl = $("#divMessage");            
        jEl.html(result.d).fadeIn(1000);
        setTimeout(function () { jEl.fadeOut(1000) }, 5000);
    },
    error: function (xhr, status) {
        alert("An error occurred: " + status);
    }
});

如果表单名称不同，你可以像这样在formData中设置数据：

var formData= {
              EmpId: $('.input1').val(),
              LeaveAvailType: $('.input2').val(),
              DateFrom: $('.input3').val(),
              DateTo: $('.input4').val(),
              LeaveDays: $('.input5').val(),
              Remarks: $('.input6').val()
              };

【讨论】：