软件开发平台异步提交Ajax解析之ajaxSubmit

软件开发平台异步提交Ajax解析之ajaxSubmit,这是干嘛用的呢,为什么又要有这种提交方法?

Web框架异步提交Ajax解析中我们介绍了Ajax异步提交技术,这儿介绍的是$.ajax函数的语法和组成,在.Net MVC-视图层使用Ajax怎么实现视图局部数据异步刷新中我们通过实例讲解了该AJAX函数的使用方法,在软件开发平台中除了$.ajax函数外,我们还有其他函数吗,他们各有什么特点呢?

今天我介绍给大家一种新的ajax提交技术$(this.form).ajaxSubmit函数。如下图所示:

软件开发平台

从图中我们可以看出,该函数和$.ajax函数的组成和调用方法都是相似的,也就函数名和调用者不一样而已,可别被它的表面所迷惑哦,其实他是jquery.form.js脚本中的一员,从jquery.form可以看出,该函数是针对表单异步提交的函数哦,就是说该函数执行的URL在Request参数中带过去的是表单所有的对象,这样就为单控件异步提交整表单数据提供了便利,整体代码如下:


$(this.form).ajaxSubmit({
	url: "@Url.Action("Uploadfile", "UpLoadControl")",
	data: { "filepath": accBtn.attr("specialPath"), "fileName": accFile.attr("name"), "serverType": accBtn.attr("serverType"), "sizestyle": sizestyle },
	dataType: "text",
	type:"POST",
	success: function (json) {
		responseText = eval("(" + json + ")");
		if (responseText.Detail == "error" || responseText.Code < 0) {
			alert("上传失败,请重试");
			return;
		} else if (responseText.Detail == "big") {
			var maxSize = accFile.parents("p[tp='p_uploadImg']").attr("maxSize");
			alert("文件大小不能超过" + maxSize + "KB");
			return;
		} else {
			var arrtext = responseText.Detail.split('|');
			accFile.prev().val(arrtext[0]);
			try {
				accFile.prevAll("input[name='PicPathList']").eq(0).val(arrtext[0]);
			} catch (e) { }
			accFile.prevAll("input[tp='hidden']").eq(0).val(arrtext[0]);
			accFile.prevAll("input[tp='hidden']").eq(0).valid && accFile.prevAll("input[tp='hidden']").eq(0).valid();
			accFile.prevAll("input[tp='hidden']").focus();
			accFile.prevAll("input[tp='hidden']").blur();

			accFile.prev().show();

			//判断是否是轮播图页面
			var node = accBtn.nextAll("input[tp=clearImg]").eq(0);
			if (node.length > 0) {
				accBtn.hide();
				accBtn.next().show(); //显示清除按钮
				accFile.hide();              //文件框隐藏
			}
			var img = accBtn.parent().find("img").eq(0);
			img.attr("displayImage", "True")
			if (img.attr("displayImage") == "True") {
				img.attr("src", arrtext[0]);
				img.show(); //显示照片
			}
			accFile.trigger("changecookiefile");
		}
	}
	});
	}
	}
	else {
	//alert("请先选择要上传的图片!");
	}
}
后台控制层代码如下:


/// <summary>
/// 上传图片
/// </summary>
/// <param name="filepath">自定义文件路径</param>
/// <returns></returns>
[HttpPost]
[ValidateInput(false)]
public ActionResult Uploadfile(string filepath, string serverType, string fileName = "fileName", string sizestyle = "")
{
	int maxSize =int.Parse( ConfigurationManager.AppSettings["PicMaxSize"]) * 1024 * 1024;

	string kk = "09876";
	kk = "23444";

	var file = Request.Files[fileName];
	if (file != null )
	{
		if (file.ContentLength > maxSize)
		{
			return new JsonResult
			{
				Data = new AjaxResult
				{
					Code = -3,
					Detail = "big"
				},
				ContentType = "text/html"
			};
		}
		else if (file.ContentLength == 0)
		{
			return new JsonResult
			{
				Data = new AjaxResult
				{
					Code = -1,
					Detail = "error"
				},
				ContentType = "text/html"
			};
		}

		int userId = this.UserID;
		string commonServerName = CommonFileServerName;
		//管理员帮用户上传图片
		if (serverType != commonServerName && userId == 0)
		{
			userId = 99999;
		}
		//管理员上传系统图片
		if (serverType == commonServerName)
		{
			userId = 0;
		}

		string filePath = ImageHelper.CompressImage(file, sizestyle);
		string remoteUrl = FileServerUlr.TrimEnd('/') + UploadFilePath;
		string result = RemoteUploadFileNew(remoteUrl, FileServerUlr, filepath, userId, filePath, fileName);
		return new JsonResult
		{
			Data = new AjaxResult
			{
				Code = string.IsNullOrEmpty(result) ? -4 : 200,
				Detail = string.IsNullOrEmpty(result) ? "网络错误!" : result
			},
			ContentType = "text/html"
		};
	}
	else
	{
		return new JsonResult
		{
			Data = new AjaxResult
			{
				Code = -1,
				Detail = "error"
			}
			,
			ContentType = "text/html"
		};
	}
}

软件开发平台

软件开发平台异步提交Ajax解析之ajaxSubmit,这是干嘛用的呢,为什么又要有这种提交方法?看过之后才知道它原来如此有用。

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:软件开发框架 » 软件开发平台异步提交Ajax解析之ajaxSubmit
本文标题:软件开发平台异步提交Ajax解析之ajaxSubmit
本文地址:http://www.hocode.com/OrgTec/UI/0022.html

相关文章: Web框架异步提交Ajax解析

电话
电话 18718672256

扫一扫
二维码