使用角度跨域发布表单数据

2023-09-05前端开发问题

本文介绍了使用角度跨域发布表单数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

我是 Angular js 的新手.我已经创建了页面，我必须将数据发布到其他 html 页面，然后我必须使用 angular 在其他页面中接收数据.

I am new in angular js. I have create page where I have to post data to other html page and then I have to receive the data in other page using angular.

我创建了一个小应用程序.我已将 home.html 页面中的数据发布到 getdata.html 页面，并且在 getdata.html 页面上我必须接收该数据.我必须仅使用表单发布来获取数据.我必须使用 post 请求在标头上传递数据，然后我必须接收它

I have create a small application. I have post data from home.html page to getdata.html page and on getdata.html page I have to receive that data. I have to get data using form posting only. I have to pass data on header using post request and then I have to receive it

test.js

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(function($routeProvider) {
$routeProvider
    .when('/home', {
        templateUrl: 'home.html',
        controller: 'StudentController'
    }).when('/getdata', {
        templateUrl: 'getdata.html',
        controller: 'getdataController'
    })
    .otherwise({
        redirectTo: '/home'
    });
});

mainApp.controller('StudentController', function($scope,$location,$window) {
 $scope.user = {firstName:"John", lastName:"Doe"};
});
mainApp.controller('getdataController', 
function($scope,$location,$window,$routeParams) { 
 alert("Get Data"); 
});

getdata.html

<div ng-controller='getdataController'>
<h2>Get Data</h2>
</div>

home.html

<div class="container" ng-controller='StudentController'>
<h1>Post Form Data</h1> 
<form novalidate method="post" action='http://localhost/#/getdata'>
<input type='hidden' value='Mohan' name="hiddenfld1"/>
<input type='hidden' value='Sharma' name="hiddenfld2"/>
<input type='hidden' value='ABC.com' name="hiddenfld3"/>
First Name:<br>
<input type="text" name='fname' ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" name='lname' ng-model="user.lastName">
<br><br>
<input type="submit" value="Submit">
</form> 
</div>

index.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8"> 
</head>
<body>

  <div ng-app="mainApp">
    <ng-view></ng-view>
  </div>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
  <script type="text/javascript" src="test.js"></script>
</body>

推荐答案

试试这个.首先，您需要对 HTML 表单进行一些更改.删除方法并使用 ng-submit.接下来，您需要注册一个工厂以从中保存和检索数据.请注意，如果窗口/状态被刷新，数据将不会保留.如果这是您想要的(对于另一个问题)，您需要探索其他方法.然后在主控制器中添加一个作用域函数以在提交时添加保存用户并在该调用成功时重定向您.

Try this. first, you need to make some changes in the HTML form. remove method and use ng-submit. next, you need to register a factory to save and retrieve data from it. note that if the window/state is refreshed, data will NOT persist. you need to explore other means if this is what you want(for another question). then add a scoped function in the main controller to add save user on submit and redirect you on the success of that call.

mainApp.controller('StudentController', function($scope, $location, $window, exampleFactory) {
  $scope.user = {
    firstName: "John",
    lastName: "Doe"
  };

  $scope.submitUser = function() {
    exampleFactory.saveUser(user)
      .then(function() {
        $location.path('getdata');
      });
  };
});
mainApp.controller('getdataController',
  function($scope, $location, $window, $routeParams, exampleFactory) {
    exampleFactory.getUserDetails()
      .then(function(user) {
        $scope.user = user;
      });
  });
mainApp.factory('exampleFactory', [function() {

  var currentUser;
  return {
    saveUser: function(userDetails) {
      currentUser = userDetails;
    },
    getUserDetails: function() {
      return currentUser;
    }
  };
}]);

<div class="container" ng-controller='StudentController'>
  <h1>Post Form Data</h1> // do not use method type on angular forms, add no validate, and use the routers native way to redirect.
  <form novalidate ng-submit="submitUser()">
    <input type='hidden' value='Mohan' name="hiddenfld1" />
    <input type='hidden' value='Sharma' name="hiddenfld2" />
    <input type='hidden' value='ABC.com' name="hiddenfld3" /> First Name:<br>
    <input type="text" name='fname' ng-model="user.firstName"><br> Last Name:<br>
    <input type="text" name='lname' ng-model="user.lastName">
    <br><br>
    <input type="submit" value="Submit">
  </form>
</div>

这篇关于使用角度跨域发布表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

js删除数组中指定元素的5种方法

JavaScript小数运算出现多位的解决办法

JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法

layui中table列表增加属性 edit=＂date＂，不生效怎么办？

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript

CoffeeScript 总是以匿名函数返回

热门文章

热门精品源码

最新VIP资源