zoukankan      html  css  js  c++  java
  • 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);
        });
    });
  • 相关阅读:
    取得窗口大小和窗口位置兼容所有浏览器的js代码
    一个简单易用的导出Excel类
    如何快速启动chrome插件
    网页表单设计案例
    Ubuntu下的打包解包
    The source file is different from when the module was built. Would you like the debugger to use it anyway?
    FFisher分布
    kalman filter
    Group delay Matlab simulate
    24位位图格式解析
  • 原文地址:https://www.cnblogs.com/samve/p/13629779.html
Copyright © 2011-2022 走看看