サーバへのAngularJSの送信

私はJava Servletにデータを投稿するが、リクエストが通過していないと思われるangularJSフォームを持っています。サーブレット "create"は呼び出されませんでした。サーバへのAngularJSの送信

ここに私のコードです：

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' 
      } 
     }) 
    }

は、 0

私のサーブレットは以下の通りですが、すべての "投稿"は印刷されません。

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

に変更ng-submit=""。これはおそらく、私が書いた最も広範な答え、haha –

私は彼の問題がng-submitがフォームタグになかったと信じていました。 –

私はcreateUser js関数の中にconsole.logを置いています。また、http呼び出しが適切なサーバーURLに解決できるかどうか確認してください。クロム開発ツールのネットワークタブでそのことを確認できますか？最後に、あなたのhttpポストでは、クエリ文字列を使用しています。それを行う必要はありません。ちょうど@ChristianStewartがデータパラメータとして提案したものを試してみてください。 – mentat

がWebサーバーにデータを投稿するには、あなたは$でオブジェクトにフォーム値をバインドしたいと思うでしょうスコープを作成し、そのオブジェクトをスクリプトに送信します。

トリックは、オブジェクト "user"全体をサーバーに送信することです。AngularはJSONで自動的にフォーマットします。また、「ユーザー」はng-modelタグで使用されていませんでした。

もう1つ注目すべきことは、アプリが要求を完了したときにアプリが何かを実行したいと思うかもしれないということです。 ".success（function（data）{}）"と ".error（...）"というメソッドを使うことができます（$ httpが返す約束事のメソッドです）。

私はPHPコードとサーブレットコードの両方を含んでいます。ただし、すべてのサーバースクリプト（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 
     }) 
    }

例Serverコード：PHP

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

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

例Serverコード：JAVAサーブレット

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で記述していますが、jsは正しくポストされていません – yxdming

私は今、JAVAサーブレットのデモを含めました。 –

問題は、サーブレットがデータを正しく取得できないことです。重要な問題は、角度jsがcorrectllyを働かせることができないことです。私とjsの行に、これらの行は呼び出されません。 – yxdming

私はサーブレットコードを含めるように私の答えを編集したng-cick=""

出典

2015-10-30 04:57:09

これは-1と投票されましたが、実際に問題を解決しました。同じページにajax post calllを作成しますが、type = button verse type = submitとng-clickを使用すると変更されました –

'ng-click'を意味しましたか？ – rinogo

サーバへのAngularJSの送信

答えて

関連する問題