2. 程式人生 > >【AngularJs】傳送Post請求

【AngularJs】傳送Post請求

阿新 • • 發佈：2018-11-11 
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">

  <title>SupplierDetail</title>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <div class="container-fluid">
    <form>
      <div class="form-group row">
        <label for
 
="inputName" class="col-sm-1 col-form-label">名稱</label>
        <div class="col-sm-11">
          <input type="text" class="form-control" id="inputName" placeholder="供應商名稱" ng-model="supplierInfo.name">
        </div>
      </div>
      <div class="form-group row">
        <label for
 
="inputRemark" class="col-sm-1 col-form-label">備註</label>
        <div class="col-sm-11">
          <input type="text" class="form-control" id="inputRemark" placeholder="供應商備註資訊" ng-model="supplierInfo.remark">
        </div>
      </div>


      <div class="form-group row">
        <div class="col-sm-11">
          <button type="submit" class="btn btn-primary" ng-click="saveData()">保 存</button>
        </div>
      </div>

    </form>

  </div>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="../lib/jquery/jquery.3.2.1.js"></script>
  <script src="../lib/popper/popper.1.12.9.js"></script>
  <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
  <script src="../lib/angular-1.7.5/angular.min.js"></script>

  <script>
    var
 
 app = angular.module('myApp', []);

    app.controller('myCtrl', function ($scope, $http) {
      // $scope.name='aaa';
      // $scope.remark='123';
      $scope.saveData = function () {
        if ($scope.supplierInfo.id) {//修改
          alert($scope.supplierInfo.name)
        }
        else {//新增
          var config = {
                    headers: { 'Content-Type': 'application/json' }
                    // transformRequest: function (obj) {
                    //     var str = [];
                    //     for (var p in obj) {
                    //         str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    //     }
                    //     return str.join("&");
                    // }
                };

                var data = {
                    "name":$scope.supplierInfo.name,
                    "remark":$scope.supplierInfo.remark
                }

                $http.post('http://localhost:8006/rest/littlecat/caobao/supplier/add', data, config)
                    .then(function (result) {  //正確請求成功時處理
                        window.location = 'SupplierList.html'
                    }).catch(function (result) { //捕捉錯誤處理
                        console.log(result);
                    });
        }
      }

    });

    
  </script>
</body>

</html>

 

相關推薦

【AngularJs】傳送Post請求

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport"

【Python】Http Post請求四種請求體的Python實現

article gif 提交 直接 方法 method 根據 encode 文獻 前言 前幾天一個剛接觸Python不深的朋友問我的Python的xml格式Post請求怎麽發送，剛好最近也在看Http請求相關的內容，所以決定總結一下。 Content-Type Conte

【soapUI】解決post請求時，body為json串，伺服器無法解析問題

       背景：傳送post請求，且body為json串時，response響應值總是提示“XX欄位值不能為空”，採用Postman、jmeter工具嘗試，結果都是如此，但Postman、jme

【前端】 傳送http請求 ajax 跨域

ajax重定向跨域問題 請求到後端，後端介面重定向到另一個域名地址：跨域問題 ajax：無重新整理，重定向時，ajax獲取重定向狀態值30*和url，再獲取重定向頁面執行完後輸出到客戶端的html程式碼，返回200     請求後端介面，後端返回302和一個url，aj

jersey client 傳送Post請求 【帶引數】

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

【Java】不依賴第三方庫傳送post請求

原始碼取自某簡訊平臺，不依賴第三方庫，無異常處理程式碼，僅供參考 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.P

【介面測試】：HttpURLConnection 傳送post請求

現在根據專案的需要，已經轉戰服務端的測試，就先從最簡單的傳送post請求，獲取響應資料，對json串解析 需求： 1、模擬不同國家的客戶端，去請求對應國家的任務 2、模擬不同的國家IP、模擬引數 3、Post傳送 post的方法類，程式碼如下：

【Scrapy框架實現傳送POST請求】

實現傳送POST請求 在爬蟲檔案中，我們一般不需要手動的對start_urls列表中的起始url傳送請求，因為爬蟲檔案中的爬蟲類繼承了父類Spider，Spider類中的start_requests方法會自動向起始url列表中的所有url發起請求。 但需要注意的是，start_r

linux shell中curl 傳送post請求json格式問題 【轉】

今天在linux中使用curl傳送一個post請求時，帶有json的資料，在傳送時發現json中的變數沒有解析出來 如下 curl -i -X POST -H 'Content-type':'application/json' -d {"BTime":""$bt

【node.js】GET/POST請求、Web 模塊

ima esp ges 實例 bst node.js 參數 模塊 pos 獲取GET請求內容 node.js 中 url 模塊中的 parse 函數提供了這個功能。 var http = require(‘http‘); var url = require(‘url‘);

解決 AngularJs $http 傳送post，get請求，SpringMvc無法接受引數的問題。

1.問題原因 預設情況下，jQuery傳輸資料使用Content-Type: x-www-form-urlencodedand和類似於"name=zhangsan&age=18"的序列， 然而AngularJS，傳輸資料使用Content-Type: appl

【ES】學習3-請求體查詢

ext 組合 https 傳遞 guide should 學習 text class 1.空查詢 GET /index_2014*/type1,type2/_search {} GET /_search { "from": 30, "size": 10 }

【angularjs】使用angular搭建PC端項目，開關按鈕

weight SM tps 資料 [] 文件 repeat amp title 方法一（使用指令） 1.指令（angular-ui-switch.js） angular.module(‘uiSwitch‘, []) app.directive(‘switch‘,

【原創】標準HTTP請求工具類

dto case 開發 utf ignore pst new mar name 以下是個人在項目開發過程中，總結的Http請求工具類，主要包括四種： 1.處理http POST請求【XML格式、無解壓】； 2.處理http GET請求【XML格式、無解壓】

Java學習--HttpURLConnection傳送post請求

import java.io.*; import java.net.HttpURLConnection; import java.net.MalformedURLException; import java.net.URL; import java.net.URLConnection; /**

axios傳送post請求返回400狀態碼

今天在用 axios 傳送一個跨域的post請求時，遇到了一個坑：Uncaught (in promise) Error: Request failed with status code 400。 前臺程式碼如下： axios({ method: "post", u

轉發：傳送post請求下載檔案

原文地址：https://blog.csdn.net/yunlala_/article/details/78385962 處理檔案流方案一 以下是我親試可以實現的一種方案： exportData () { const form = this.getSearc

httpClient傳送post請求的demo

/** * 傳送HttpClient * */ public class HttpClientTest { public static void main(String[] args) throws IOException { delete(); } public st

axios傳送post請求，thinkphp獲取不到引數

我使用的是vue-cli 可能是傳送的資料格式不對，需要新增頭資訊（content-type）。引入qs外掛，用qs轉變資料格式。 import qs from 'qs'; axios.post('/api/xxx/xxx/xxx?'+qs.stringify(newChild),

【坑】tomcat get請求 亂碼

部署Tomcat <Connector port="8233" protocol="HTTP/1.1" connectionTimeout="20000" 這裡加上-- redirectPo