gpt4 book ai didi

AngularJS POST 到服务器

转载 作者:行者123 更新时间:2023-12-03 13:25:06 25 4
gpt4 key购买 nike

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

这是我的代码:

测试.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>

脚本.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>

最佳答案

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

诀窍是将整个对象“用户”提交给服务器,Angular 会自动将其格式化为 JSON。此外,ng-model 标签没有使用“用户”。

另一件需要注意的事情是,当应用完成请求时,您可能希望包含一些应用程序要做的事情。您可以使用方法“.success(function(data){})”和“.error(...)”来执行此操作(这些是 promise $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>

Controller
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 到服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15047556/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com