使用原生form表单提交但不要刷新页面

2021-03-18 乐帮网

javascript html

以下示例是实现功能提交表单后不跳转页面，而是刷新原页面的功能。这个适合所有语言，也可以改造一下实现通过执行js把返回的新数据添加到原页面当中。这里排出Ajax方式。
正常的表单提交后原页面会默认跳转到执行结果。我们写的前端代码如下：

<iframe id='iframe' name='iframe' width='1' height='1' style='display:none'></iframe>
<form method="post"  target="iframe" action="/Admin/Upload">
    <div class="form-group">
        <label for="usr">用户名:</label>
        <input type="text" class="form-control" id="usr" name="usr" />
    </div>
    <div class="form-group">
        <label for="pwd">密码:</label>
        <input type="password" class="form-control" name="pwd" id="pwd" />
    </div>
    <button type="submit" class="btn btn-primary">确定上传</button>
</form>

基本思想是为form指定了target属性，这样跳转在iframe当中跳转了，但是iframe是隐藏的，下面就是实现执行一段js这个功能了。在后台的方法中我们可以这么写。

 [HttpPost]
 public async Task<IActionResult> Upload(string usr,string pwd)
{
     string html = @"<script>parent.location.reload();</script>";
     return Content(html, MediaTypeHeaderValue.Parse("text/html"));
}

这样当我们提交后父页面就会自动刷新了，或者换成你需要执行的js代码。

本文链接：https://lebang2020.cn/details/210318mw1yaseb.html

关注我的微信公众号
在公众号里留言交流
投稿邮箱：1052839972@qq.com

庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮。门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力