angular.js的post数据方式

  公司的项目前端部分现在改用angular,一切从头学起,今天记录一下关于数据请求的问题,由于get的请求方式比较简单,与post也类似,所以就单独讲讲post方式。

  文档上post数据的写法有好几种,都是利用$http模块,通用写法如下:

// Simple GET request example:
$http({
    method: ‘GET‘,
    url: ‘/someUrl‘
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
}, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

  然后我们将方式改为post,加上data试一下。

$http({
    method:‘post‘,
    url:‘test.php‘,
    data:{name:‘test‘,age:20},
}).then(function successCallback(response) {
    alert(‘添加成功‘);
}, function errorCallback(response) {
    alert(‘添加失败‘);
});

  php文件中我们就写一行print_r($_POST)即可。

  打开谷歌浏览器F12,查看下调试信息,发现数据传输过去了

  但是细心的朋友一定会发现一个问题,就是我们这里的传输方式是request playload,而不是我们通常的form data。他俩最大的区别就是,request playload的方式我们在php文件中通过$_POST是拿不到传过来的数据的。可以看到返回的打印信息为空。

  

  我们再修改一下,加上headers和transformRequest

$http({
    method:‘post‘,
    url:‘test.php‘,
    data:{name:‘test‘,age:20},
    headers:{‘Content-Type‘: ‘application/x-www-form-urlencoded‘},
    transformRequest: function (data) {
      return $.param(data);
    }
}).then(function successCallback(response) {
    alert(‘添加成功‘);
}, function errorCallback(response) {
    alert(‘添加失败‘);
});

  然后查看返回值

  成功了,并且此时传输方式变成了

  OK,over!

时间: 2024-11-16 22:57:15

angular.js的post数据方式的相关文章

angular js 指令的数据传递 及作用域数据绑定

<div my-directive my-url="http://google.com" my-link-text="Click me to go to Google"></div> angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, scope: { myUrl: '@', //绑定

Angular JS如何将数据发送至后台 java 类

AngularJS与后端联系实质上就是javascript与后端的联系,传送的就是json对象,只是AngularJS的双向数据绑定非常实用,它可以帮助我们少写很多javascript代码,它的强大之处不用再多介绍.. 首先导入项目所需jar包,这里有DWR的jar包和JSON的jar包: 这里还需要配置DWR框架,省略.... jsp页面代码: <%@ page language="java" import="java.util.*" pageEncodin

angular js 页面添加数据保存数据库

一.编写实体类Controller层返回数据使用 package entity; import java.io.Serializable; public class Result implements Serializable{ private static final long serialVersionUID = -8946453797496982517L; private boolean success; private String message; public Result(bool

angular js及时获取数据值

var directiveData = app.directive("directiveP2", function () { return { link:function postLink(scope,lEle,lAttr) { lAttr.$observe('attrDd', function(value) { YTpageData.bodyAttr.bgMusic = value; console.log(YTpageData) }); } }; });

ANGULAR JS POST 数据解析

ANGULAR js POST 数据的时候,默认是发送JSON数据到服务端的. var params={defId:"1234"}; $http.post(url,params).success(function(data, status, headers, config){                                            }); 我们在服务端获取数据数据时,使用 request.getParmeter("defId");这种方

angular js 实现表单提交时下面的table获取到表单里面的数据

angular js 实现表单提交时下面的table获取到表单里面的数据<!DOCTYPE html><html ><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <s

angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. ‘参数’ 就是$scope对象下的一个对象

angular js 多处获取ajax数据的方法

angular js 多处获取ajax数据的方法 var app=angular.module("cart",[]);app.service("getData",function ($http) { return{ ajax:function () { return $http.get("product.json"); } }}); app.controller("listCtrl",function ($scope,getD

angular js 模拟获取后台的数据

在这里我们把后台的数据用一个.json文件进行代替. 项目的目录结构如下: puDongLibraryLearning----ui-router-learning ---- data-------people.json puDongLibraryLearning-test.html people.json的代码如下: [ { "id": "293", "isActive": false, "eyeColor": "b