AngularJS POST到服務器

我有一個angularJS形式，它將數據發佈到Java Servlet，但我沒有看到請求經過;沒有調用servlet「create」。AngularJS POST到服務器

這裏是我的代碼：

的test.html

<body> 
    <form ng-controller="UserController"> 

     <legend>Create User</legend> 
     <label>Name</label> 
     <input type="text" id="name" name="name" ng-model="name" placeholder="User Name"> 

     <label>Email</label> 
     <input type="text" id="email" name="email" ng-model="email" placeholder="ur email here"> 

     <label>Password</label> 
     <input type="text" id="pwd" name="pwd" ng-model="pwd" placeholder="ur own pwd here"> 

     <button ng-submit="createUser()" class="btn btn-primary">Register</button> 

    </form> 
</body>

的script.js

function UserController($scope, $http) { 
    $scope.user = {}; 
    $scope.createUser = function() { 
     $http({ 
      method : 'POST', 
      url : '/create', 
      data : 'name=' + $scope.user.name + '&email=' + $scope.user.email, 
      headers : { 
       'Content-Type' : 'application/x-www-form-urlencoded' 
      } 
     }) 
    }

我的servlet如下，但它不打印「張貼」一個。

public class FirstServlet extends HttpServlet 
{ 

    /** 
    * 
    */ 
    private static final long serialVersionUID = 1L; 

    @Override 
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
      throws ServletException, IOException 
    { 
     System.out.println("Get"); 
    } 

    @Override 
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
      throws ServletException, IOException 
    { 
     System.out.println("Post"); 
    } 
}

Web服務器是碼頭，並在web.xml如下：

<?xml version="1.0" encoding="UTF-8"?> 
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    version="2.4" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 
    <servlet> 
     <servlet-name>createUser</servlet-name> 
     <servlet-class>servlet.FirstServlet</servlet-class> 
     <load-on-startup>0</load-on-startup> 
    </servlet> 
    <servlet-mapping> 
     <servlet-name>createUser</servlet-name> 
     <url-pattern>/create</url-pattern> 
    </servlet-mapping> 
</web-app>

來源

2013-02-24 yxdming

我已經編輯我的答案，包括servlet代碼。這可能是我寫的最廣泛的答案，哈哈 – 2013-02-24 01:16:26

我相信他的問題是，ng-submit不在form標籤上，正如我在下面回答的。 – 2013-02-25 16:40:17

我把一個console.log內的createUser js函數。另外，你確定你的http調用可以解析爲適當的服務器url嗎？也許你可以在你的chrome開發工具網絡選項卡中檢查它？最後，在你的http文章中，你使用的是查詢字符串，不需要這樣做，只要嘗試@ChristianStewart建議的數據參數即可。 – mentat 2015-10-30 05:08:07

要發佈數據到網絡服務器，你會想你的表單值綁定到一個對象在$範圍，然後將該對象提交給腳本。

訣竅是將整個對象「用戶」提交給服務器，並且Angular會自動使用JSON格式化它。此外，「用戶」沒有被ng-model標籤使用。

需要注意的另一件事是，您可能會希望在完成請求時爲應用添加一些內容。你可以使用方法「.success（function（data）{}）」和「.error（...）」來做到這一點（這些是承諾$ http返回的方法）。

我已經包含PHP和Servlet代碼;但是，對於所有服務器腳本（來自Angular的JSON數據）都是一樣的。

HTML

<body> 
<form ng-controller="UserController" ng-submit="createUser()"> 

    <legend>Create User</legend> 

    <label>Name</label> 
    <input type="text" id="name" name="name" ng-model="user.name" placeholder="User Name"> 

    <label>Email</label> 
    <input type="text" id="email" name="email" ng-model="user.email" placeholder="ur email here"> 

    <label>Password</label> 
    <input type="text" id="pwd" name="pwd" ng-model="user.pwd" placeholder="ur own pwd here"> 

    <button class="btn btn-primary">Register</button> 

</form> 
</body> 

</html>

控制器

function UserController($scope, $http) { 
    $scope.user = {}; 
    $scope.createUser = function() { 
     $http({ 
      method : 'POST', 
      url : '/create', 
      data : $scope.user 
     }) 
    }

示例服務器代碼：PHP

$data = file_get_contents("php://input"); 
$objData = json_decode($data); 

$pwd = $objData -> pwd; 
$user = $objData -> name; //etc

示例服務器代碼：Java Servlet的

JSONObject jObj = new JSONObject(request.getParameter("mydata")); // this parses the json 
Iterator it = jObj.keys(); //gets all the keys 

while(it.hasNext()) 
{ 
    String key = it.next(); // get key 
    Object o = jObj.get(key); // get value 
    //do something with it here 
    //you can also do: 
    String user = jObj.get("user"); 
}

來源

2013-02-24 01:03:20

我不使用PHP。我只是用java.But編寫了一個簡單的servlet，它似乎是，js沒有正確發佈 – yxdming 2013-02-24 01:10:01

我已經包含了一個JAVA Servlet演示。 – 2013-02-24 01:20:17

問題不在於servlet無法正確獲取數據。關鍵問題在於，角度js不能正確工作。當我在js中行時，那些行不能被調用。 – yxdming 2013-02-24 01:31:09

變化ng-submit=""到ng-cick=""

來源

2015-10-30 04:57:09

這個投票是-1，但它實際上解決了我遇到的問題.. ng-submit不允許我使ajax後調用到同一頁面，但更改爲type = button verse type = submit和使用ng-click工作 – 2016-01-10 19:21:26

您是不是指'ng-click'？ – rinogo 2016-06-02 16:56:31

AngularJS POST到服務器

回答

相關問題