jQuery异步提交表单的两种方式

本文为大家分享了两种jQuery异步提交表单的方式，具体内容如下

目前成都创新互联已为近1000家的企业提供了网站建设、域名、网络空间、网站托管、服务器租用、企业网站设计、巴马网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

第一种方式：普通ajax方式提交

$(function(){

$('#send').click(function(){

$.ajax({

type:

"GET",

url:

GLOBAL_PATH

+

"/Enterprise/savecompanyphoto",

data:

{username:$("#username").val(),

content:$("#content").val()},

dataType:

"json",

success:

function(data){

$('#resText').empty();

//清空resText里面的所有内容

var

html

=

'';

$.each(data,

function(commentIndex,

comment){

html

+=

'div

class="comment"h6'

+

comment['username']

+

':/h6p

class="para"'

+

comment['content']

+

'/p/div';

});

$('#resText').html(html);

}

});

});

});

第二种方式：普通ajaxSubmit方式提交表单

script

src="jquery.form.js"

type="text/javascript"/script

script

src="dialog.js?lib=false"

type="text/javascript"/scriptsrc="jquery.min.js"

type="text/javascript"

function

uploader_img(){

var

optionsSave={

type:

"POST",

url:

GLOBAL_PATH

+

"/Enterprise/savecompanyphoto",

data:$('#addImg').serialize(),

success:

function

(data)

{

if

(data.code

==

0)

{

AlertMini('alt1',

"上传图片成功!",

'success.gif',

2);

window.location.reload();

}

else

{

AlertMini('alt1',

"上传图片失败!",

'error.gif',

2);

}

},

error:

function

(data)

{

AlertMini('alt1',

"上传图片失败!",

'error.gif',

2);

}

}

$('#addImg').ajaxSubmit(optionsSave);

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

jQuery插件之ajaxFileUpload

ajaxFileUpload是一个异步上传文件的jQuery插件，语法：$.ajaxFileUpload([options])。

使用方法：

第一步：先引入jQuery与ajaxFileUpload插件。注意先后顺序。

script src="jquery-1.7.1.js" type="text/javascript"/script

script src="ajaxfileupload.js" type="text/javascript"/script

第二步：HTML代码

　第三步：JS代码第四步：后台页面upload.aspx代码。

jsp中使用jquery的ajaxfileupload插件怎么实现异步上传

ajaxfileupload实现异步上传的完整例子：

JSP页面中引入的script代码：

script

function ajaxFileUpload()

{

$("#loading").ajaxStart(function(){

$(this).show();

})//开始上传文件时显示一个图片

.ajaxComplete(function(){

$(this).hide();

});//文件上传完成将图片隐藏起来

$.ajaxFileUpload({

url:'AjaxImageUploadAction.action',//用于文件上传的服务器端请求地址

secureuri:false,//一般设置为false

fileElementId:'imgfile',//文件上传空间的id属性 input type="file" id="imgfile" name="file" /

dataType: 'json',//返回值类型 一般设置为json

success: function (data, status) //服务器成功响应处理函数

{

alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量

if(typeof(data.error) != 'undefined')

{

if(data.error != '')

{

alert(data.error);

}else

{

alert(data.message);

}

}

},

error: function (data, status, e)//服务器响应失败处理函数

{

alert(e);

}

}

)

return false;

}

/script

struts.xml配置文件中的配置方法：

struts

package name="struts2" extends="json-default"

action name="AjaxImageUploadAction" class="com.test.action.ImageUploadAction"

result type="json" name="success"

param name="contentType"text/html/param

/result

result type="json" name="error"

param name="contentType"text/html/param

/result

/action

/package

/struts

上传处理的Action ImageUploadAction.action

package com.test.action;

import java.io.File;

import java.io.FileInputStream;

import java.io.FileOutputStream;

import java.util.Arrays;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")

public class ImageUploadAction extends ActionSupport {

private File imgfile;

private String imgfileFileName;

private String imgfileFileContentType;

private String message = "你已成功上传文件";

public File getImgfile() {

return imgfile;

}

public void setImgfile(File imgfile) {

this.imgfile = imgfile;

}

public String getImgfileFileName() {

return imgfileFileName;

}

public void setImgfileFileName(String imgfileFileName) {

this.imgfileFileName = imgfileFileName;

}

public String getImgfileFileContentType() {

return imgfileFileContentType;

}

public void setImgfileFileContentType(String imgfileFileContentType) {

this.imgfileFileContentType = imgfileFileContentType;

}

public String getMessage() {

return message;

}

public void setMessage(String message) {

this.message = message;

}

@SuppressWarnings("deprecation")

public String execute() throws Exception {

String path = ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload");

String[] imgTypes = new String[] { "gif", "jpg", "jpeg", "png","bmp" };

try {

File f = this.getImgfile();

String fileExt = this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".") + 1).toLowerCase();

/*

if(this.getImgfileFileName().endsWith(".exe")){

message="上传的文件格式不允许!!!";

return ERROR;

}*/

/**

* 检测上传文件的扩展名是否合法

* */

if (!Arrays.String asList(imgTypes).contains(fileExt)) {

message="只能上传 gif,jpg,jpeg,png,bmp等格式的文件!";

return ERROR;

}

FileInputStream inputStream = new FileInputStream(f);

FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getImgfileFileName());

byte[] buf = new byte[1024];

int length = 0;

while ((length = inputStream.read(buf)) != -1) {

outputStream.write(buf, 0, length);

}

inputStream.close();

outputStream.flush();

} catch (Exception e) {

e.printStackTrace();

message = "文件上传失败了!!!!";

}

return SUCCESS;

}

}

怎么样通过jQuery Ajax实现上传文件

Query Ajax在web应用开发中很常用，它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法，接下来通过本文给大家介绍jquery ajax 上传文件处理方式。

FormData对象

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。之前都是用原生js的XMLHttpRequest写的请求

XMLHttpRequest方式

xhr.open("POST", uri, true);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 xhr.status == 200) {

// Handle response.

alert(xhr.responseText); // handle response.

}

};

fd.append('myFile', file);

// Initiate a multipart/form-data upload

xhr.send(fd);

其实jquery的ajax也可以支持到的，关键是设置：processData 和 contentType 。

ajax方式

var formData = new FormData();

var name = $("input").val();

formData.append("file",$("#upload")[0].files[0]);

formData.append("name",name);

$.ajax({

url : Url,

type : 'POST',

data : formData,

// 告诉jQuery不要去处理发送的数据

processData : false,

// 告诉jQuery不要去设置Content-Type请求头

contentType : false,

beforeSend:function(){

console.log("正在进行，请稍候");

},

success : function(responseStr) {

if(responseStr.status===0){

console.log("成功"+responseStr);

}else{

console.log("失败");

}

},

error : function(responseStr) {

console.log("error");

}

});

求一段JS或Jquery异步上传图片的代码

图片和文件等流媒体 上传都是靠from表单的提交。

你可以设置一个隐藏的from表单

里面有个input id='file' type='file'

选择玩图片之后赋值给file

然后用jquery from表单提交即可

form id="form" runat="server" enctype="multipart/form-data" 

input id='file' type='file'

/from

$.ajax({

url:'XXXX',//上传后台路径

data:$('#form').serialize(),

type:"POST",

success:function(){

}

});