Form表单提交之后,获取返回值

经常用form表单提交的小伙伴有没有发现,form表单默认的提交是没有返回值的,而且默认提交成功之后是跳转,跳转的action的路径,下面写一下默认的提交如何获取到form表单的返回值json,并且阻止默认的跳转动作。

第一种方式 :让form默认调整当前的iframe 即可

页面结构见下面:

<form target="form" action="" enctype="multipart/form-data" method="post">
     <input type="file">
     <button type="submit"    id="submit" style="display:none">提交</button> 
</form>
<iframe name="form" id="form" style="display:none"></iframe>

细心的小伙伴有没有发现上面的结构多了一个iframe的隐藏内联框架,其实最主要的就是我们的form表单的target属性值等于这个iframe的name和id,那么我们就可以用iframe来接收返回值,并且把默认的跳转让iframe去跳转,下面是js的代码,来获取这个返回值json。

$("#submit").click();

$("#form").load(function(){
     var text = $(this).contents().find("body").text(); //获取到的是json的字符串
     var j = $.parseJSON(text);  //json字符串转换成json对象
     console.log(j)
})

注意,只要这个iframe框架加载完成就说明发送成功了。

第二种:引入 引用jquery-form.js文件

1.给form添加id值:

<form action="/News/SaveMessage" method="post" accept-charset="utf-8" class="form" id="frm-reg" name="frm-reg">

设置所有input标签的name属性值为数据库的字段值,即可以传值到后台

2.给提交按钮添加id值:

<input class="sub-btn fl" type="button" id="sub" name="Submit" value="提交">

3.引用jquery-form.js文件

4.jquery表单提交:

//表单提交,会把所有有name属性的值提交到后台
$("#sub").click(function () {
    $("#frm-reg").ajaxSubmit(function (data) {
        alert(data.Message);
    });
});

 

  • 6
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值