jquery 发送图片,表格

最新推荐文章于 2022-10-18 14:36:47 发布

原创最新推荐文章于 2022-10-18 14:36:47 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

前端学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用jQuery处理表单提交的例子，详细解释了如何通过AJAX进行异步数据提交，包括文件上传、表单数据序列化及CSRF令牌的设置。此外，还展示了如何处理服务器返回的JSON响应，并根据结果进行页面跳转。

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

 $('form').submit(function (event) {
            var formdata = new FormData();
            event.preventDefault();
            console.log($('#add').children());
            var count = 0;
            var myArry = new Array();//生成空数组
            $('#add a').each(function () {
                myArry[count] = $(this).text();
                count += 1;

            });
            $('input[name="key"]').attr('value',myArry);
            $.ajaxSetup({
                data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
            });

            $('form input').each(function (i,n) {
                if ($(n).attr('name') != undefined){
                    if($(n).prop('type') == 'file'){//图片或者是表格
                        var paramName = $(n).attr('name');
                        var paramValue = $(n).get(0).files;
                        formdata.append(paramName,paramValue[0]);
                    }else{
                        var paramName = $(n).attr('name');
                        var paramValue = $(n).attr('value');
                        formdata.append(paramName,paramValue)
                    }
                }
                jQuery.ajax({
                    url :'{% url "projectinfo" %}',
                    data :formdata,
                    type :'POST',
                    cache : false,
                    contentType : false,
                    processData : false,
                    dataType : 'json',
                    success:function (data) {
                        console.log(data);
                        if (data.erro){
                            alert(data.erro)
                        }else{
                            window.location.href = '{% url "index" %}'
                        }
                    }
                })
            })})