Fatal编程技术网
  • javascript/
  • Javascript Ajax脚本不能用于表单提交？

Javascript Ajax脚本不能用于表单提交？

javascript jquery json ajax asp.net-mvc

Javascript Ajax脚本不能用于表单提交？,javascript,jquery,json,ajax,asp.net-mvc,Javascript,Jquery,Json,Ajax,Asp.net Mvc,我有一个问题，我正在加载一个部分页面，但是当我单击“保存”按钮时，我不希望此页面上的表单重定向 不确定我是否以正确的方式使用了脚本，我希望在单击提交时发布到控制器，但我希望被重定向回我所在的页面（AdminPanel/AdminProfile），而不是重定向到其他控制器/视图（Account/Manage） AdminProfile视图： <div id="tab-2" class="tab-pane">

我有一个问题，我正在加载一个部分页面，但是当我单击“保存”按钮时，我不希望此页面上的表单重定向

不确定我是否以正确的方式使用了脚本，我希望在单击提交时发布到控制器，但我希望被重定向回我所在的页面（
AdminPanel/AdminProfile
），而不是重定向到其他控制器/视图（
Account/Manage
）

AdminProfile视图：

                    <div id="tab-2" class="tab-pane">
                           @{Html.RenderPartial("~/Views/Account/Manage.cshtml");
                           }
                    </div>
带脚本的Partialview：

@model LocalPasswordModel
@{
    ViewBag.Title = "Change Password";
}
<section class="hgroup">
    <div class="panel-body">       
        <ul class="breadcrumb pull-right top-right">
            <li>You're logged in as <strong>@User.Identity.Name</strong></li>
        </ul>
        <ul class="message-success">@ViewBag.StatusMessage</ul>
    @using (Html.BeginForm("Manage", "Account", FormMethod.Post, new { id = "SavePassword", @class = "form-horizontal" }))
    {
        <div class="social_sign">
            <h3>Change your password.</h3>
        </div>
                                        @Html.AntiForgeryToken()
                                        @Html.ValidationSummary()
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">Old Password</label>
                                            <div class="col-sm-10">
                                            @Html.PasswordFor(m => m.OldPassword, new { @class = "form-control" })
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">New Password</label>
                                            <div class="col-sm-10">
                                        @Html.PasswordFor(m => m.NewPassword, new { @class = "form-control"})
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">Confirm Password</label>
                                            <div class="col-sm-10">
                                                @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-12 col">
                                                <input type="submit" class="btn btn-primary pull-right" value="Change password" />
                                            </div>
                                        </div>

    }
    </div>
</section>

@model LocalPasswordModel
@{
ViewBag.Title=“更改密码”；
}

    

  • 您以@User.Identity.Name登录
    • 



    @ViewBag.StatusMessage

@使用（Html.BeginForm（“Manage”、“Account”、FormMethod.Post、new{id=“SavePassword”、@class=“form horizontal”}））
{
更改您的密码。
@Html.AntiForgeryToken（）
@Html.ValidationSummary（）
旧密码
@Html.PasswordFor（m=>m.OldPassword，new{@class=“form control”}）
新密码
@Html.PasswordFor（m=>m.NewPassword，new{@class=“form control”}）
确认密码
@Html.PasswordFor（m=>m.ConfirmPassword，new{@class=“form control”}）
}
上面视图中的脚本：

@section Scripts {
    <script>
        $('#SavePassword').submit(function () 
        {
            if ($(this).valid()) 
            {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) 
                    {
                        if (result.redirectTo) 
                        {
                            window.location.href = result.redirectTo;
                        } 
                        else 
                        {
                            $(".tab-2").html(result);
                        }
                    },
                    error: function () 
                    {

                    }
                });
          }
    })
    </script>
    @Scripts.Render("~/bundles/jqueryval")
}

@节脚本{
$（'#SavePassword'）。提交（函数（）
{
if（$（this）.valid（））
{
$.ajax({
url:this.action，
类型：this.method，
数据：$（this）.serialize（），
成功：功能（结果）
{
if（result.redirectTo）
{
window.location.href=result.redirectTo；
} 
其他的
{
$（“.tab-2”）.html（结果）；
}
},
错误：函数（）
{
}
});
}
})
@Scripts.Render（“~/bundles/jqueryval”）
}
似乎什么也没发生，我得到的只是一个空页面，里面有
{“redirectTo”：“/AdminPanel/AdminProfile”}
。哪个是url:
http://localhost:57239/Account/Manage

您已经附加了AJAX调用，但忘记阻止默认提交事件。因此，请使用
event.preventDefault（）
：

您应该按照以下方式更改代码：

<script>
    $('#SavePassword').submit(function () 
    {
        if ($(this).valid()) 
        {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) 
                {
                    if (result.redirectTo) 
                    {
                        window.location.href = result.redirectTo;
                    } 
                    else 
                    {
                        $(".tab-2").html(result);
                    }
                },
                error: function () 
                {

                }
            });
      }

     return false;
    })
</script>


$（'#SavePassword'）。提交（函数（）
{
if（$（this）.valid（））
{
$.ajax({
url:this.action，
类型：this.method，
数据：$（this）.serialize（），
成功：功能（结果）
{
if（result.redirectTo）
{
window.location.href=result.redirectTo；
} 
其他的
{
$（“.tab-2”）.html（结果）；
}
},
错误：函数（）
{
}
});
}
返回false；
})
使用
event.preventDefault（）
或
返回false从事件处理程序内部
if
语句您在if语句中提到的，下面的答案表示它在if？之外。如果表单无效，验证插件将默认阻止表单提交，只有当表单有效并且希望使用ajaxis发布数据时，才需要停止页面重定向，使提交按钮成为常规按钮，处理click事件而不是submit事件是不可能的？仍然会将我发送到同一页面。当单击submit时，我在页面上只有一个错误，它会将我重定向到
找不到任何元素
它仍会将我重定向到Account/Manage视图。我现在没有一个实时的网址。这已经让我头疼了4天了。@GarrithGraham检查保存日志按钮。告诉我你看到了什么？什么是“保存日志”按钮？我在Firefox的哪里可以找到它？@GarrithGraham你可以尝试使用Chrome吗？在函数末尾添加return false也可以。仍然将我重定向到Account/Manage页面，然后返回Json数据。

$('#SavePassword').submit(function (e) {
  e.preventDefault();
  // Rest of your code.
  if ($(this).valid()) 



<script>
    $('#SavePassword').submit(function () 
    {
        if ($(this).valid()) 
        {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) 
                {
                    if (result.redirectTo) 
                    {
                        window.location.href = result.redirectTo;
                    } 
                    else 
                    {
                        $(".tab-2").html(result);
                    }
                },
                error: function () 
                {

                }
            });
      }

     return false;
    })
</script>