软件开发框架Ajax两种实现方法对比

我们在前面两篇文章中分别介绍了ajax和ajaxsubmit,那么他们哟什么区别和联系呢,本软件开发框架Ajax两种实现方法的对比来告诉您。

从问题入手

我们先来看一个问题,实际项目研发的时候报的一个错误,如下图,后台Request获取前端上传的image图片,红色箭头处获取的的值为Null,所以pictureFileLoad.FileName就报错,也获取不到图片信息,这是怎么回事儿呢?

软件开发框架ajaxsubmit

定位解决

我们查看前端传送代码,代码如下:

   $.post('@Url.Action("Save")', { objectstring: JSON.stringify(params) }, function (data) {
		if (data.Status) {
			$('#Id').val(data.Id);
			layer.close(index);
			ShowNotice(data.Message, "info");
		}
		else {
			layer.close(index);
			ShowNotice(data.Message, "danger");
		}
	}, "json");

 上述代码中用jquery的post方法异步传输,该方法是一个纯ajax传输方法,通过json格式传输数据,具体技术文档请参见Web框架异步提交Ajax解析。该种方法是纯ajax json数据提交,并不是form表单提交,所以在后台用reques获取表单值是获取不到的,那怎么办呢?

<">解决:查了相关资料,jquery提供了JavaScript脚本专门解决form表单提交的问题,它就是ajaxform,具体技术文档请参见软件开发平台异步提交Ajax解析之ajaxSubmit。 这就好办,更改下前端代码,全前端代码如下:
	<form enctype="multipart/form-data" id="main-form" method="post">
		//form表单及其组成...
	</form>

        $("#btn_save").bind("click", function () {
            var params = $("#main-form").serializeJSON();
            var workexpList = $('#workexpstb').bootstrapTable('getData');
            params.WorkExpList = workexpList;
            var eductaionexpList = $('#eductaionexpstb').bootstrapTable('getData');
            params.EductaionExpList = eductaionexpList;
            layer.confirm('@this.Intl("Common.SaveConfirm.Message").ToString()', { btn: ['确认', '取消'] }, function () {
                layer.close(layer.index);
                for (var x = 0; x < workexpList.length; x++) {
                    if (workexpList[x].CName === null || workexpList[x].CName === "" || workexpList[x].StartDate === null || workexpList[x].StartDate === "") {
                        ShowNotice("工作经历有明细项不能为空,请输入完全!", "danger");
                        return;
                    }
                }
                var index = layer.msg('@this.Intl("Field:Common.Dealing.Message").ToString()', {
                    icon: 16,
                    time: false,
                    shade: 0.2
                });
                $('#main-form').data('bootstrapValidator').validate();
                if ($('#main-form').data('bootstrapValidator').isValid()) {
                    $("#main-form").ajaxSubmit({
                        data: { "objectstring": JSON.stringify(params) },
                        url: '@Url.Action("Save")',
                        success: function (data) {
                            if (data.Status) {
                                $('#Id').val(data.Id);
                                layer.close(index);
                            }
                            else {
                                layer.close(index);
                                ShowNotice(data.message, "danger");
                            }
                        }
                    });
               }
                else {
                    layer.close(index);
                }
            }, function () { })
        });
    }

结语

如果后台需要使用rquest方式获取前端值,则需要用ajaxform提交数据,如图两种提交方式对比:

软件开发框架两种ajax方式

贴上后台接收action代码:

		[HttpPost]
        public ActionResult Save(string objectstring)
        {
            bool status = false;
            string message = this.Intl("Common.Message.SaveSuccessfully");
            try
            {
                var resumemain = JsonConvert.DeserializeObject<ResumeMain>(objectstring);
				.....
				
		}

页签:Ajax AjaxSubmit Request传值

标签: Web开发框架开发指南红宝书

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

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:软件开发框架 » 软件开发框架Ajax两种实现方法对比
本文标题:软件开发框架Ajax两种实现方法对比
本文地址:https://www.hocode.com/OrgTec/UI/0038.html

相关文章: 软件开发框架form表单submit多个按钮提交数据到后台 | web框架-Ajax.ActionLink使用方法

电话
电话 18718672256

扫一扫
二维码