AngularJS POST 到服务器 [英] AngularJS POST to Server
问题描述
我有一个将数据发布到 Java Servlet 的 angularJS 表单，但我没有看到请求通过；servlet创建"未被调用.
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.
这是我的代码:
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 如下，但它不打印全部".
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");
}
}
Web 服务器是jetty，web.xml 如下:
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>
推荐答案
要将数据发布到 Web 服务器，您需要将表单值绑定到 $scope 中的一个对象，然后将该对象提交给脚本.
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.
诀窍是将整个对象用户"提交到服务器，Angular 会自动将其格式化为 JSON.此外，ng-model 标签没有使用user".
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.
另一件需要注意的事情是，您可能希望在应用程序完成请求时包含一些要执行的操作.您可以使用方法.success(function(data){})"和.error(...)"来做到这一点(这些是promise $http 返回的方法).
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).
我已经包含了 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");
}
这篇关于AngularJS POST 到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
