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

  从问题入手

快速开发平台

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

定位解决

我们查看前端传送代码，代码如下：

   $.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格式传输数据，该种方法是纯ajax json数据提交，并不是form表单提交，所以在后台用reques获取表单值是获取不到的，那怎么办呢？

<">解决：查了相关资料，jquery提供了JavaScript脚本专门解决form表单提交的问题，它就是ajaxform， 这就好办，更改下前端代码，全前端代码如下：

	<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提交数据，如图两种提交方式对比：

贴上后台接收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两种实现方法对比
本文标题：软件开发框架Ajax两种实现方法对比