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);
        });
    });
  • 相关阅读:
    002.NFS相关配置项
    001.NFS简介
    002.DNS-BIND简介
    001.DNS原理及配置格式
    002.DHCP配置
    001.DHCP简介
    001.Chrony时间服务器
    博客开篇记载!
    【python-opencv】图像梯度
    【python-opencv】形态转换
  • 原文地址:https://www.cnblogs.com/samve/p/13648464.html
Copyright © 2011-2022 走看看