AngularJS POST 到服务器答案

【问题标题】：AngularJS POST to ServerAngularJS POST 到服务器
【发布时间】：2013-02-24 01:02:01
【问题描述】：

我有一个将数据发布到 Java Servlet 的 angularJS 表单，但我没有看到请求通过；未调用 servlet“create”。

这是我的代码：

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服务器是jetty，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>

【问题讨论】：

我已经编辑了我的答案以包含 Servlet 代码。这可能是我写的最全面的答案了，哈哈
我相信他的问题是 ng-submit 不在表单标签上，正如我在下面回答的那样。
我会在 createUser js 函数中放置一个 console.log。另外，您确定您的 http 调用可以解析为正确的服务器 url 吗？您可以在您的 chrome 开发工具网络选项卡中检查吗？最后，在您的 http 帖子中，您使用的是查询字符串，无需这样做，只需尝试 @ChristianStewart 为数据参数建议的内容..

标签： angularjs

【解决方案1】：

要将数据发布到 Web 服务器，您需要将表单值绑定到 $scope 中的一个对象，然后将该对象提交给脚本。

诀窍是将整个对象“用户”提交给服务器，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");
}

【讨论】：

我没有使用 php。我只是用java写了一个简单的servlet。但是js似乎没有正确发布
我现在已经包含了一个 JAVA Servlet 演示。
AngularJS 可以正常工作，它对互联网上的许多人都很好。
答案似乎正确，也许 OP 应该接受答案？
我能知道控制器中提到“mydata”的位置以从 request.getParameter("mydata") 获取值

【解决方案2】：

将ng-submit 更改为ng-click 应该可以解决问题。

【讨论】：

这被选为-1，但它实际上解决了我遇到的问题.. ng-submit 不允许我将 ajax 发布调用到同一页面，但更改为 type=button verse type=submit 并使用 ng-click 工作
你的意思是ng-click？