语义 UI ：api 与 ajax 调用

Question

我有一个包含两个字段的表单，用户名和密码。我正在使用语义 UI / JQuery 来提交表单。

  $(document).ready(function () {

        $('#ValidateUser').form(
            {
                on: 'submit',
                fields: {
                    username: {
                        identifier: 'username',
                        rules: [{
                            type: 'empty',
                            prompt:'Username cannot be empty'
                        }]
                    },
                    password: {
                        identifier: 'password',
                        rules: [{
                            type: 'empty',
                            prompt:'Password cannot be emtpy'
                        }]
                    }
                },
                onSuccess: function(event){
                    event.preventDefault();
                    $.api({
                        url: '@Url.Action("Login", "Validation")',
                        serializeForm: true,
                        data: new FormData(this),
                        onSuccess: function (result) {
                            result.preventDefault();
                            if (result.Success) {
                                window.location = "/Dashboard/Dashboard";
                            }
                            else {

                                $('#formresult').append(result.Msg);
                            }
                            return false;
                        }
                    });

                }
            });
    });

然而，这不起作用。如果我用 $.ajax 调用替换语义 UI .api 调用，效果很好。

        $(document).ready(function () {

        $('#submitbutton').click(function(){
            $('#formresult').hide();
        });

        $('#ValidateUser').form(
                 {
                     on: 'blur',
                     fields: {
                         username: {
                             identifier: 'username',
                             rules: [{
                                 type: 'empty',
                                 prompt: 'Username cannot be empty'
                             }]
                         },
                         password: {
                             identifier: 'password',
                             rules: [{
                                 type: 'empty',
                                 prompt: 'Password cannot be emtpy'
                             }]
                         }
                     },

                     onSuccess: function (event) {
                         $('#formresult').hide();
                         event.preventDefault();
                         var formData = new FormData(this);
                         $.ajax({
                             url: '@Url.Action("Login", "Validation")',
                             type: "POST",
                             dataType: "json",
                             contentType: "application/json; charset=utf-8",
                             data: formData,
                             contentType: false,
                             processData: false,
                             success: function (result) {

                                 if (result.Success) {
                                     window.location = "/Dashboard/Dashboard";
                                 }
                                 else {
                                     $('#formresult').show();
                                     $('#formresult').text(result.Msg);
                                 }


                             },
                             error: function (result) {
                                 $('#formresult').show();
                                 $('#formresult').text(result);
                             }
                         });
                         event.preventDefault();
                     }
                 });


    });

谁能帮我弄清楚为什么。api 语义调用不起作用？

Answer 1

自己设法解决了它，以备将来参考，以防有人遇到同样的麻烦，这是我解决它的方法。我通过管道传递了 .api 调用，而不是在表单验证成功时调用它。

这是完整的代码。

$(document).ready(function () {

        var urllink = '@Url.Action("Login", "Validation")';


        $('#ValidateUser').form(
                                 {
                                     on: 'blur',
                                     fields: {
                                         username: {
                                             identifier: 'username',
                                             rules: [{
                                                 type: 'empty',
                                                 prompt: 'Username cannot be empty'
                                             }]
                                         },
                                         password: {
                                             identifier: 'password',
                                             rules: [{
                                                 type: 'empty',
                                                 prompt: 'Password cannot be emtpy'
                                             }]
                                         }
                                     },
                                     onSuccess: function (event) {
                                         $('#formresult').hide();
                                         $('#formresult').text('');
                                         event.preventDefault();
                                         return false;
                                     }

                                 }
                               )
                             .api({
                                 url: urllink,
                                 method:'POST',
                                 serializeForm: true,
                                 data: new FormData(this),
                                 onSuccess: function (result) {
                                    $('#formresult').show();
                                    if (result.Success) {
                                        window.location = "/Dashboard/Dashboard";
                                    }
                                    else {

                                        $('#formresult').append(result.Msg);
                                    }
                                    return false;
                                }
                });


    });

语义 UI ：api 与 ajax 调用

Semantic UI : api vs ajax calls

jquery

semantic-ui