AngularJs Post 提交 改造

C#后台可通过Request["xxxx"].ToString()进行获取相对应的Form表单参数

Html 代码

<!DOCTYPE html>
<html ng-app="formApp">
	<head>
		<meta charset="utf-8">
		<title>ngPost提交测试</title>
		<script type="text/javascript" src="js/lib/angular.min.js" ></script>
	</head>
	<body >
			<form name="form1" ng-controller="formController" method="post">
		        类型名:<input type="text" name="act" ng-model="formData.act" /><br />
		        职位名:<input type="text" name="name" ng-model="formData.name"/><br />
		        <button ng-click="processForm()" ng-disabled="!form1.$valid">提交</button>
		    </form>
	</body>
</html>

AngularJs 控制器改造

        var app = angular.module("formApp", [], function ($httpProvider) {
            $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
            $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
            var param = function (obj) {
                var query = "", name, value, fullSubName, subName, subValue, innerObj, i;
                for (name in obj) {
                    value = obj[name];
                    if (value instanceof Array) {
                        for (i = 0; i < value.length; ++i) {
                            subValue = value[i];
                            fullSubName = name + "[" + i + "]";
                            innerObj = {};
                            innerObj[fullSubName] = subValue;
                            query += param(innerObj) + "&";
                        }
                    } else if (value instanceof Object) {
                        for (subName in value) {
                            subValue = value[subName];
                            fullSubName = name + "[" + subName + "]";
                            innerObj = {};
                            innerObj[fullSubName] = subValue;
                            query += param(innerObj) + "&";
                        }
                    } else if (value !== undefined && value !== null) {
                        query += encodeURIComponent(name) + "=" + encodeURIComponent(value) + "&";
                    }
                }
                return query.length ? query.substr(0, query.length - 1) : query;
            };
            $httpProvider.defaults.transformRequest = [function (data) {
                return angular.isObject(data) && String(data) !== "[object File]" ? param(data) : data;
            }];
        });

调用方法:

        app.controller("formController", function ($scope, $http) {
            $scope.formData = {};
            $scope.processForm = function () {
                console.log("测试一下"+$scope.formData);
                $http.post("http://218.244.144.162:8094/Service/JobInterface.ashx",$scope.formData).success(function(data){
                    console.log(data);
                }).error(function(data){
                    console.log(data);
                    console.log("失败");
                });
            }
        });

C#后台编写,使用一般处理程序进行编写接口

        #region 全局变量
        bool dev = true;
        #endregion
        #region 处理HTTP请求
        public void ProcessRequest(HttpContext context)
        {
            context.Response.Cache.SetNoStore();//禁止自动缓存
            context.Response.Clear();
            context.Response.ContentType = "application/json";
            if (dev)
            {
                context.Response.Headers.Add("Access-Control-Allow-Origin", "*");
                context.Response.Headers.Add("Access-Control-Allow-Headers", "X-Requested-With");
            }
            string action = "";
            string temp = "";
            try
            {
                action = context.Request["act"].ToString();
                //action = context.Request.Form["act"].ToString();
                temp = GetActionResult(action);
            }
            catch (Exception e)
            {
                temp = e.ToString();
            }
            //输出数据
            context.Response.Write(temp);
        }
        #endregion
        #region 返回操作结果
        /// <summary>
        /// 返回操作结果
        /// </summary>
        /// <param name="action">操作</param>
        /// <returns></returns>
        private static string GetActionResult(string action)
        {
            string result = "无数据";
            switch (action)
            {
                case "GetJobByPage":
                    result = GetJobInfoByPage();
                    break;
                case "AddJob":
                    result = AddJob();
                    break;
            }
            return result;
        }
        #endregion

        #region 业务逻辑
        #region 添加
        /// <summary>
        /// 添加职位
        /// </summary>
        /// <returns></returns>
        private static string AddJob()
        {
            Job model = new Job();
            model.ID = 0;
            model.Name = HttpContext.Current.Request["name"];
            //model.Name = HttpContext.Current.Request.Form["name"].ToString();
            return JobController.AddJob(model);
        }
        #endregion
时间: 2024-11-06 09:31:42

AngularJs Post 提交 改造的相关文章

angularjs $http提交数据探索

前两天在搞自己的项目,前端js框架用的是angularjs框架:整站多的差不多的时候出事了:那就是当我用$http.post()方法想服务器提交一些数据的时候:后台总是接收不到数据: 预示采用了其他方法暂时性替代一下: 今天正好有时间研究这个事情:网上查了很多资料:都试了试:不是报错句是不符合:但是还是给我提供了一些解决问题的思路: 正文开始:首先做了个demo如下:主要是为了比较他们的不同之处: html如下: <div class="container-fluid" data

如何使用angularjs实现ajax异步请求

Sample.html <!DOCTYPE html> <html ng-app="myApp"> <head> <title>form</title> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body> <form name=

“高三”笔记之动态JS、动态样式

拜读<JavaScript高级程序设计> --- 站在巨人的肩上 动态JS.动态样式就是页面加载时不存在,但将来通过DOM操作动态添加的脚本:包括加载外部文件和添加内部代码块两种:动态加载的外部文件能够立即运行,而动态添加的代码块却不能如愿的立即执行:下面将主要以JS为例,小小的探索下动态脚本的加载.执行以及jQuery的做法.Angularjs的相关做法: 1.动态加载外部文件 因为动态加载的外部JS会立即执行,也没什么浏览器兼容性问题,这个好处理:这里的重点是怎么知道脚本已加载完成呢?呵呵

如何使用AngularJS对表单提交内容进行验证

AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等--使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证. AngularJS对表单中常用的验证操作 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine

使用angularjs的$http.post异步提交数据时,服务器接收不了的问题

一,在正常情况下,使用表单的post方法提交数据,默认请求头的Content-Type:application/x-www-form-urlencoded类型, 提交数据格式如下: 二,使用angularjs的$http.post提交数据,使用的是Content-Type:application/json类型, 请求头格式如下: 直接代码块: 1 app.controller('payCtrl',function($scope,$http){ 2 //保存邮箱地址 3 $scope.emailE

AngularJS的表单验证提交示例

代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsFormSubmit.rar 前台代码: <%@ page contentType="text/html; charset=UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.

angularjs解决方案之 Form表单中按钮提交

在form表单中如果有子表时,子表中的按钮默认的提交方式是submit,如果不这是btn的类型为button的话,点击子表按钮操作时,主表单也是会提交的. <button class="'+ n.btnClass +'" type="button" ng-click="operationRow(\''+meta.row+'\')">'  +<i class="'+ n.iClass +'"></i

angularjs中form表单提交验证

angular.module("MyApp",["ngMessages"]): <form name="formMyName" ng-submit="$ctrl.changePassword(formMyName)" ng-cloak novalidate> <--输入新密码--> <md-input-container md-no-float> <input name="n

AngularJs,$http()中Post提交方式

$http({ method : 'POST', cache: false, url : baseUrl + '/hcpms/madagascar/updateJobAndTaskStatus.do', data : { jobList:$scope.checkJobCode, taskList:$scope.checkTaskCode }, headers:{ "Content-Type":"application/json" } }).success(funct