Question

我正在编写一个Web应用程序，允许用户创建问题并为这些答案分配答案和指向值。我设置了它，以便用户输入他们想要制作的问题，然后我提取一个问题所需的所有字段。当用户点击“保存”时下一步按钮清除这些字段，他们可以输入下一个问题信息。我每次使用AJAX将模型数据发布到我的服务器上单击下一步。我的问题是我的AJAX只有在我允许页面刷新时才会运行，而我不想这样做。

HTML

<input type="submit" id="next" value="Save & Next" />

Javascript

 $(document).ready(function () {
 $('#next').click(function(e) {

        var model = @Html.Raw(Json.Encode(Model));
        e.preventDefault();

        if (counter <= ques)
        {
            $.ajax({
                url: "/Questions/Create",
                type: "POST",
                data: JSON.serialize(model),
                cache: false,
                success: function (data)
                {

                }
            });
            //counter++;
        }
        else {

        }

    });
});

C＃服务器端

    [HttpPost]
    [ValidateAntiForgeryToken]
    public int Create(QAViewModel qa)
    {
        System.Diagnostics.Debug.WriteLine("madeit");
        if (ModelState.IsValid)
        {
            foreach (var item in qa.questions)
            {
                //add question data into the DB
                db.questions.Add(item);
            }
            foreach (var item in qa.questionAnswers)
            {
                db.answers.Add(item);
            }
            db.SaveChanges();
            return(1);
        }

        return (0);
    }

真正的问题伴随着e.preventDefault();如果我删除它，代码就会运行，我的模型数据会按预期添加到我的数据库中。添加e.preventDefault()之后，甚至不执行AJAX代码。我尝试使用<input type="button">，因为它的默认操作不会执行任何操作。

关于为什么会发生这种情况的任何想法？

解几个小时后，解决方案是在我的视图中使用@Html.AddAntiForgeryToken()。我忘了我正在检查防伪标记，它不允许AJAX将数据发布到我的控制器操作。

Answer 1

您正在使用不存在的函数JSON.serialize。如果要将javascript对象或数组转换为JSON字符串，请使用JSON.stringify(object)

使用浏览器控制台检查是否存在错误

，可以轻松找到此问题

Answer 2

提交按钮以提交表单内容。

如果您不需要提交，则应使用普通按钮。但是，如果由于任何原因您仍想使用提交按钮，则可能需要在方法结束时return false，以避免提交按钮来执行其工作。

$(document).ready(function () {
    $('#next').click(function(e) {
        var model = @Html.Raw(Json.Encode(Model));

        if (counter <= ques)
        {
            $.ajax({
                url: "/Questions/Create",
                type: "POST",
                data: JSON.serialize(model),
                cache: false,
                success: function (data)
                {

                }
            });
            //counter++;
        } else {

        }

        return false;
    });
});

DEMO HERE

Answer 3

快速而有点肮脏的修复方法是保持一个布尔值来使用你是否执行了防止默认值。

var preventBoolean = false;
$(document).ready(function () {
$('#next').click(function(e) {

    var model = @Html.Raw(Json.Encode(Model));
    if(preventBoolean)
    {        
         e.preventDefault();
    }
    preventBoolean = true;

    if (counter <= ques)
    {
        $.ajax({
            url: "/Questions/Create",
            type: "POST",
            data: JSON.serialize(model),
            cache: false,
            success: function (data)
            {
                 preventBoolean = false;
            }
        });
        //counter++;
    }
    else {

    }

});
});

我不确定你想再把它打开，但我已经把它设置成了成功。好的解决方案是绑定和解除绑定方法，但是你必须处理事件。

AJAX仅适用于页面刷新

3 个答案: