ajax,异步提交form表单，从后台返回值到前端

最新推荐文章于 2022-05-16 16:03:40 发布

转载最新推荐文章于 2022-05-16 16:03:40 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3677751/blog/1574598

文章标签：

#前端 #c# #java #ViewUI

本文介绍了一个使用JavaScript实现的文件上传功能，包括文件选择、表单提交及后台处理流程。涉及表单元素设置、Ajax提交及JSON响应处理。

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

2019独角兽企业重金招聘Python工程师标准>>>

<script LANGUAGE="JavaScript">
        $(function() {
            //$("#bbutton").onclick(function(){
                file_change();
            //});
        });
        function file_change() {
            $("#file").change(function () {
                //$Form
                var form = document.createElement('form');
                $("#file").attr('name', $("#file")[0].files[0].name);
                $(form).append($("#file")[0]);
                $('#object_guid').before('<input type="file" name="file" id="file" />');
                file_change();
                $(form).attr("enctype", "multipart/form-data");
                $(form).ajaxSubmit({
                    type: "post",
                    dataType: "json",
                    url: "${pageContext.request.contextPath }/file/add/upload1",
                    async: false,
                    success: function (data) {
                        var res=data;
                        alert(res);
                        alert("成功"+res.object_guid);
                        if (res.status == 1){
                            $('#object_guid').val(res.object_guid);
                            alert("成功"+res.path);
                        } else {
                            console.log(data);
                            alert(data.message);
                        }
                    },
                    error : function(data) {
                        console.log(data);
                        var res = data.responseText;
                        $('#object_guid').val(res);
                        alert(data.status+" 上传异常 "+res);
                        //alert(data);
                    }
                });
            })
        }
</script>

<form id="myform" action="${pageContext.request.contextPath }/law/add_law"  method="post" >

    title：<input type="text" name="title" id="title" />
    summary:<input type="text" name="summary" id="summary" />
    produce：<input type="text" name="produce" id="produce">
        announce<input type="text" name="announce"  id="announce">
        exec_star<input type="text" name="execStart" id="exec_start" />
        exec_end<input type="text" name="execEnd" id="exec_end" />
    exec_forever<input type="text" name="execForever" id="exec_forever" />
    ann_agency<input type="text" name="annAgency" id="ann_agency" />
        effect_area<input type="text" name="effectArea" id="effect_area" />
        effect_department<input type="text" name="effectDepartment" id="effect_department" />
        text<input type="text" name="text" id="text" />
        上传附件：<input type="file" name="file" id="file" size="45" value=""/>
        <input type="hidden" name="objectGuid"  id="object_guid" /><br>
        <%--<input type="button" name="button" id="bbutton" value="上传"/>--%>
    <button type="submit"  class="btn btn-primary" >提交</button>
</form>

转载于:https://my.oschina.net/u/3677751/blog/1574598