AngularJS POST到服务器 [英] AngularJS POST to Server

查看：135
本文介绍了AngularJS POST到服务器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个angularJS形式职位数据Java Servlet中，但我没有看到要求办理; servlet的创造不叫。

下面是我的code：

的test.html


    
    
    
    
    
    
    

 ＆LT;身体GT;
    ＆LT;形式NG控制器=UserController的＆GT;        ＆LT;传奇＆GT;创建用户和LT; /传说＆GT;
        ＆LT;标签＆gt;名称和LT; /标签＆gt;
        ＆LT;输入类型=文本ID =名称NAME =名NG模型=名称占位符=用户名＆GT;        ＆LT;标签＆gt;电子邮件和LT; /标签＆gt;
        ＆LT;输入类型=文本ID =电子邮件NAME =电子邮件NG模型=电子邮件占位符=乌尔电子邮件Here＆GT;        ＆LT;标签＆gt;密码和LT; /标签＆gt;
        ＆LT;输入类型=文本ID =PWDNAME =PWDNG模型=PWD占位符=这里乌尔自己的PWD＆GT;        ＆LT;按钮NG提交=的createUser（）级=BTN BTN-小学＆GT;注册＆LT; /按钮＆GT;    ＆LT; /表及GT;
＆LT; /身体GT;

的script.js 

 函数UserController中（$范围，$ HTTP）{
    $ scope.user = {};
    $ scope.createUser =功能（）{
        $ HTTP（{
            方法：POST，
            网址：'/创建，
            数据：名称='+ $ scope.user.name +'和;电子邮件='+ $ scope.user.email，
            标题：{
                内容类型：应用程序/ x-WWW的形式urlen codeD
            }
        }）
    }

我的servlet是如下，但它不打印邮报的体会。

 公共类FirstServlet延伸的HttpServlet
{    / **
     *
     * /
    私有静态最后的serialVersionUID长1L =;    @覆盖
    保护无效的doGet（HttpServletRequest的REQ，HttpServletResponse的RESP）
            抛出了ServletException，IOException异常
    {
        的System.out.println（获取）;
    }    @覆盖
    保护无效的doPost（HttpServletRequest的REQ，HttpServletResponse的RESP）
            抛出了ServletException，IOException异常
    {
        的System.out.println（邮报）;
    }
}

该网站的服务器是码头，并在web.xml如下：

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT; web应用程序的xmlns =htt​​p://java.sun.com/xml/ns/j2ee的xmlns：XSI =htt​​p://www.w3.org/2001/XMLSchema-instance
    版本=2.4
    XSI：的schemaLocation =htt​​p://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd\">
    ＆LT;＆servlet的GT;
        ＆LT; servlet的名称＆gt;＆的createUser LT; / servlet的名称＆gt;
        ＆LT;的servlet类＆GT; servlet.FirstServlet＆LT; / servlet的类＆GT;
        ＆所述;负载上启动大于0＆下/负载上启动＆GT;
    ＆LT; / servlet的＆GT;
    ＆LT; Servlet映射＆GT;
        ＆LT; servlet的名称＆gt;＆的createUser LT; / servlet的名称＆gt;
        ＆LT; URL模式＆GT; /创建＆LT; / URL模式＆GT;
    ＆LT; / Servlet映射＆GT;
＆LT; / web-app的＆GT;


解决方案

要POST数据到Web服务器时，你会​​想你的表单值绑定到$范围对象，然后提交该对象的脚本。

关键是要提交整个对象的用户到服务器，并在角JSON会自动格式化。另外，用户没有被使用的纳克模型标记

另外要注意的是，你可能要包括的东西应用程序时，它完成的要求做。您可以使用的方法.success（功能（数据）{}）和.error（...）做这个（这些都是承诺$ HTTP回报的方法）。

我已经包含PHP和Servlet的code;这是相同的，但是，对于所有的服务器脚本（从角JSON数据）。

HTML 

 ＆LT;身体GT;
＆LT;形式NG控制器=UserController的NG提交=的createUser（）＆GT;    ＆LT;传奇＆GT;创建用户和LT; /传说＆GT;    ＆LT;标签＆gt;名称和LT; /标签＆gt;
    ＆LT;输入类型=文本ID =名称NAME =名NG-模式=user.name占位符=用户名＆GT;    ＆LT;标签＆gt;电子邮件和LT; /标签＆gt;
    ＆LT;输入类型=文本ID =电子邮件NAME =电子邮件NG模型=user.email占位符=这里乌尔电子邮件＆GT;    ＆LT;标签＆gt;密码和LT; /标签＆gt;
    ＆LT;输入类型=文本ID =PWDNAME =PWDNG模型=user.pwd占位符=乌尔自己的PWD这里＆GT;    ＆LT;按钮类=BTN BTN-小学＆GT;注册＆LT; /按钮＆GT;＆LT; /表及GT;
＆LT; /身体GT;＆LT; / HTML＆GT;

控制器 

 函数UserController中（$范围，$ HTTP）{
    $ scope.user = {};
    $ scope.createUser =功能（）{
        $ HTTP（{
            方法：POST，
            网址：'/创建，
            数据：$ scope.user
        }）
    }

示例服务器code：PHP 

  $ =数据的file_get_contents（PHP：//输入）;
$ objData = json_de code（$的数据）;$ PWD = $ objData  - ＆GT; PWD;
$ USER = $ objData  - ＆GT;名称; //等等

示例服务器code：的Java Servlet 

 的JSONObject jObj =新的JSONObject（的request.getParameter（MYDATA））; //这个解析JSON
迭代它= jObj.keys（）; //得到所有的钥匙而（it.hasNext（））
{
    字符串键= it.next（）; //获取密钥
    对象o = jObj.get（键）; //获得价值
    //用它做什么这里
    //你也可以这样做：
    字符串用户= jObj.get（用户）;
}

I have an angularJS form which posts data to a Java Servlet, but I am not seeing the request go through; servlet "create" wasn't called.

Here's my code:

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

my servlet is as below,but it doesn't print "Post" an all.

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");
    }
}

The web server is jetty,and the web.xml as below:

<?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>

解决方案

To post data to a web server, you will want to bind your form values to a object in the $scope, and then submit that object to the script.

The trick is to submit the entire object "user" to the server, and Angular will automatically format it in JSON. Also, "user" was not being used by the ng-model tags.

Another thing to note is that you will probably want to include something for the app to do when it finishes the request. You can use the methods ".success(function(data){})" and ".error(...)" to do this (these are methods on the promise $http returns).

I've included both PHP and Servlet code; it is the same, however, for all server scripts (JSON data from Angular).

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>

Controller

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

Example Server Code: PHP

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

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

Example Server Code: 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");
}

这篇关于AngularJS POST到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆