jQuery、ajax提交fromdata数据

需求说明:简单演示ajax提交fromData类型数据。

代码说明:ajax在传输数据的时候基本格式大都是固定的,只需要修改传输类型即可。下面介绍基本的参数提交。

  步骤一:建立html或者jsp页面,引入jquery-3.2.1.min.js(其他版本亦可)。

  步骤二:建立文件选择输入框,上传按钮并给其ID赋值。

  步骤三:编写jQuery、ajax代码,完成上传到指定controller。

下面是示例代码:

<!DOCTYPE html><html lang="en"><head>    <script src="jquery-3.2.1.min.js"></script>    <script>        $(function () {            $("#upload").click(function () {                $("#imgWait").show();                var formData = new FormData();                formData.append("myfile", document.getElementById("file1").files[0]);                formData.append("Type", "Image");                console.log(formData);                $.ajax({                    url: "http://localhost:8080/XX/XX/uploadFile.do",                    type: "POST",                    data: formData,                    contentType: false,                    processData: false,                    success: function (data) {                        console.log(");                    },                    error: function () {                        console.log("上传失败!");                    }                });            });        });    </script></head><body>选择文件:<input type="file" id="file1" /><br /><input type="button" id="upload" value="上传" /></body></html>

总结:上面代码中ajax访问接口实现文件的上传功能,涉及到ajax跨越的问题这里就不做介绍了。
时间: 2024-11-08 22:58:26

jQuery、ajax提交fromdata数据的相关文章

(局部刷新)jquery.ajax提交并实现单个div刷新

web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法,就是下面我们要说的ajax配合div局部刷新页面,其实很简单,下面我们就看一下这种刷新方式是如何实现的. jsp页面ajax代码如下: $("#waitWork").click(function(){ var url = "请求地址"; var data = {typ

JQuery ajax提交表单及表单验证

JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目 注:经过验证,formValidator只适合一个页面不超过一个表单的情况. 本例实现功能:通过ajax提交表单,并在提交表单前对表单的数据进行验证. 主要通过两个插件实现: 第一个: jQuery Form Plugin http://jquery.malsup.com/form 主要功能是ajax提交表单 第二个:jQuery formValida

jquery ajax提交表单数据的两种方式

jquery ajax提交表单数据的两种方式

jquery $.ajax 获取josn数据

<script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript"> function test() { $.ajax({ type: "get", cache: false, url: "../../ajax/Task.aspx", data: 'id

jquery ajax提交整个表单参数

转自 : http://www.jb51.net/article/35085.htm function submit(){ var formData=$("form").serialize();  $.ajax({  type: "POST",  url: "/index.aspx",  processData:true,  data:formData,  success: function(data){  $("#result&quo

前端笔记-jquery ajax提交表单

jquery ajax提交表单 最近才发现,jquery ajax提交表单可以这么简单 $.ajax({ url: "udpate", type:"POST", data:$('#formId').serialize(), success: function(data){ alert(data); }, error:function(data){ }}); } 关键在于data:$('#formId').serialize(),这里的formId就是表单的Id. 以

jquery ajax提交json格式的数据,后台接收并显示各个属性

我的表单如下: <form onsubmit="return false"> <ul> <li><span>用户名</span> <input type='text' placeholder='请输入用户名' name='user'></li> <li><span>密码</span> <input type='text' placeholder='请输入密码'

Jquery ajax提交表单几种方法详解

[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程 HTTP 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方

JQuery AJAX提交中文乱码的解决方案

?JQuery是一个非常优秀的框架,在特定场合下使用JQuery提交数据,相当的方便快捷. 但是,在处理一个GB2312编码的网站AJAX提交时,中文数据却成了乱码. 现象如下: 1)在Firefox下,处理页面的编码为gb2312,提交数据没有问题,中文能够正确解析: 2)在IE8下,处理页面的编码为gb2312,提交中文数据出现乱码. 无论是$.post还是$.ajax,抑或$.ajaxSubmit(来自于Form插件),在之前的UTF-8编码的网站都没有出现过任何问题, 看来是由于提交数据