Question

我有一个表单，我希望通过jQuery Ajax提交。我的Ajax函数类似于以下代码：

   $('#submitForm').click(function (e) {
        e.preventDefault();

        $.ajax({
            url: '/Letter/Create',
            type: 'post',
            data: {
                letterViewModel: $('#letterForm').serialize(),
                relatedLetters: JSON.stringify(relatedLetterList)
            },
            success: function (result) {
                alert('success ' + result);
            },
            error: function () {
                alert('error');
            }
        });
    });

我的行动是：

    [HttpPost]
    public virtual ActionResult Create(LetterViewModel letterViewModel, string relatedLetters)
    {
        .
        .
        .
    }

问题是，Action方法的第一个参数始终为null。我不知道是什么问题，任何建议都会有所帮助。

更新：序列化后的数据：

__ RequestVerificationToken = goQJDz5BCMx9NCJAZ3yuMA2E-WRgL9pJvavkLhF27epxkz3bRO_t-ADNhGHslHjXifLuxmFQcJBuOkMBSqMlFjkfKjVK-hGgY-nvRmp_2i81＆安培;类别ID = 1＆安培; LetterTitle = 456＆安培;出口= 465＆安培; ArchivePlace = 456＆安培; OrgLetterNumber = 456＆安培; OrgLetterDate_fa = 1392％2F02％2F02＆安培; IndicatorNumber = 456456＆安培; IndicatorDate_fa = 1392 ％2F02％2F09＆安培; RelatedLetterId = 3

我的LetterViewModel：

public class LetterViewModel
{
    public Int32 LetterId { get; set; }

    public Int32 RelatedLetterId { get; set; }

    public Int32 ServiceUserId { get; set; }

    public Int32 CategoryId { get; set; }

    public String LetterTitle { get; set; }

    public DateTime OrgLetterDate { get; set; }

    public String OrgLetterNumber { get; set; }

    public DateTime IndicatorDate { get; set; }

    public String IndicatorNumber { get; set; }

    public String ArchivePlace { get; set; }

    public Boolean HasAppendix { get; set; }

    public Int32 PageCount { get; set; }

    public String Exporter { get; set; }

    public String OrgLetterDate_fa { get; set; }

    public String IndicatorDate_fa { get; set; }

    public List<CategoryViewModel> CategoryViewModels { get; set; }

    public List<VwLetterViewModel> RelatedLetters { get; set; }
}

Answer 1

我之前遇到过控制器和POST数据时出现此问题，因为它在发送变量时与GET不同，您需要以JSON格式发送数据，例如：

$('#submitForm').click(function (e) {
    e.preventDefault();

    var data = {
        letterViewModel: $('#letterForm').serialize(),
        relatedLetters: relatedLetterList // don't need to stringify this as it's done in JSON.stringify below
    }

    var obj = JSON.stringify(data);

    $.ajax({
        url: '/Letter/Create',
        type: 'post',
        data: obj,
        success: function (result) {
            alert('success ' + result);
        },
        error: function () {
            alert('error');
        }
    });
});

Answer 2

问题在于：

data: {
    letterViewModel: $('#letterForm').serialize(),
    relatedLetters: JSON.stringify(relatedLetterList)
},

.serialize()方法已经执行了数据的application/x-www-form-urlencoded序列化，而jQuery数据执行了另一个数据，因此您最终会收到无效请求。

您可以在#letterForm中添加隐藏字段，并在发布表单之前立即设置其值：

$('#letterForm').submit(function (e) {
    e.preventDefault();

    // set the value of the hidden field to the corresponding JSON
    $('#relatedLetters').val(JSON.stringify(relatedLetterList));

    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result) {
            alert('success ' + result);
        },
        error: function () {
            alert('error');
        }
    });
});

另请注意，我使用了表单的.submit事件而不是提交按钮的.click事件。这样做的原因是表单可以通过其他方式提交，而不仅仅是用鼠标单击提交按钮。例如，用户在表单字段的某些内容中按 Enter 键。这将提交表单，如果您订阅了提交按钮的click事件，您的AJAX请求将永远不会触发。

使用jQuery的序列化数据不是Post to Action方法

2 个答案: