如何通过submit提交form表单获取后台传来的返回值

最新推荐文章于 2022-12-26 20:09:24 发布

原创最新推荐文章于 2022-12-26 20:09:24 发布 · 9.8k 阅读

12 ·

CC 4.0 BY-SA版权

博客介绍了使用jquery.js和jquery - form.js实现表单提交的步骤，包括写form表单、用js获取后台返回值，且后台正常编写。同时提到提交form表单时的验证可通过jquery.form.js解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery.js

jquery-form.js

步骤1：写一个form表单

<form action="链接" id="form1" method="post" style="text-align:center;" enctype="multipart/form-data">  
    <input type="file" id="file_sc" name="file" accept=".xls,.xlsx"><br/>  
    提交人：<input type="text" id="name" name="name" ><br/>  
        <input type="submit" id="tj" value="提交">  
 </form>

步骤2：js获取从后台返回的值

$(function(){  
    /** 验证文件是否导入成功  */  
    $("#form1").ajaxForm(function(data){    
        if(data=="1"){  
            alert("提交成功！");     
        }  
    });       
});

后台该怎么样写还怎么写。

ps：在这里在讲点关于提交form表单时的验证

 $("#form1").bind("submit", function(){    
    var file=$("#file_sc").val();  
    if(file == ""){    
        alert("请选择文件！！！");  
        return false;    
   }    
});

可以通过jquery.form.js来解决。

<form>
    标题：<input type="text" name="title" /><br />
    内容：<textarea name="content"><textarea/><br />
<button>提交</button>
</form>

$('button').on('click', function() {
    $('form').on('submit',
        function() {
            var title = $('inpur[name=title]').val(),
            content = $('textarea').val();
            $(this).ajaxSubmit({
                type: 'post', // 提交方式 get/post
                url: 'your url', // 需要提交的 url
                data: {
                    'title': title,
                    'content': content
                },
                success: function(data) {
                    // data 保存提交后返回的数据，一般为 json 数据
                    // 此处可对 data 作相关处理
                    alert('提交成功！');
                }
                $(this).resetForm(); // 提交后重置表单
            });
            return false; // 阻止表单自动提交事件
        }
    );
});