JEE：带有jsp和angular的形式
[英]JEE : form with jsp and angular
问题描述
我是一个有角度的新人，我正在做一个小银行项目。 我正在使用JSP和angular 1.3.2。 我有一个创建帐户的小表格。 在输入客户编号后我模糊的表格上，如果客户存在，它应该显示其他属性，如名称adresse等。但在我的情况下，一切都显示。 即使我在servlet中打印一个字符串只是为了测试nothings即将来临。 在角度控制器中，“警报”也没有显示任何内容。 现在我想了解什么不起作用。 请有人帮我解决这个问题！ 提前致谢。 这是代码。 Jsp Page
var banking = angular.module('banking', []);
banking.controller('accountCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.getClient = function() {
$http({
method: 'GET',
url: 'account',
params: {
action: "getClient",
numClient: $scope.numClient
}
}).success(function(data, status, headers, config) {
alert(ok);
$scope.nameCli = data.nomComplet;
$scope.adresse = data.adresse;
$scope.email = data.email;
$scope.tel = data.telephone;
$scope.sexe = data.sexe;
$scope.datenaiss = data.dateNaissance;
});
};
alert("ok");
}
]);
<body ng-controller="accountCtrl">
<div class="row">
<div class="col-lg-10 col-md-9">
<!-- <div class="col-lg-1"><img src="img/ajout_contact.png" alt=""></div>-->
<h1 class="titre-contact">Creation d'un compte</h1>
</div>
</div>
<div class="container col-lg-10" style="border: 1px solid silver; border-radius: 1px 1px 1px 1px">
<div class="row">
<div class="col-sm-4">
<div class="tableaudebord">
<div class="contact_container">
<div class="row">
<div class="col-lg-8 col-lg-12 col-md-offset-1">
<!-- <h2>Ajouter un client</h2> -->
<div class="nb_com" style="display:none">9</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<form class="form-horizontal" role="form" data-toggle="validator">
<div class='row'>
<div class="col-lg-8 col-lg-12 col-md-offset-1">
<div class="titleprghp">
<span class="prg">Informations Client</span>
</div>
</div>
</div>
<div class='row'>
<div class="col-lg-4 col-lg-offset-1">
<!--<form class="form-horizontal" role="form">-->
<div class="form-group">
<label for="cin" class="col-sm-2 control-label">Numéro D'identité</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="cin" ng-model="numClient" ng-blur="getClient()">
</div>
</div>
<div class="form-group">
<label for="nom" class="col-sm-2 control-label">Nom :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nameCli" ng-model="nameCli">
</div>
</div>
<div class="form-group">
<label for="datenaiss" class="col-sm-2 control-label">Date Naissance</label>
<div class="col-sm-8" data-validate="date">
<input type="date" class="form-control" name="datenaiss" ng-model="datenaiss" id="datenaiss" required="" data-format="DD/MM/YYYY">
</div>
</div>
<div class="form-group">
<label for="sexe" class="col-sm-2 col-xs-12 control-label">Sexe</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" id="inlineCheckbox1" value="m" ng-model="sexe"> Masculin
</label>
<!-- <div class=" hidden-lg hidden-md col-xs-2"></div>-->
<label class="form-check-label">
<input class="form-check-input" type="radio" id="inlineCheckbox2" value="f" ng-model="sexe"> Feminin
</label>
</div>
</div>
<!-- </form>-->
</div>
<div class="col-lg-4 col-lg-offset-0">
<!--<form class="form-horizontal" role="form">-->
<div class="form-group">
<label for="adresse" class="col-sm-2 control-label">Adresse :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="adresse" ng-model="adresse">
</div>
</div>
<div class="form-group">
<label for="mail" class="col-sm-2 control-label">Email :</label>
<div class="col-sm-8" data-validate="email">
<input type="email" class="form-control" name="email" id="email" ng-model="email" data-error="Adresse email invalide" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="tel" class="col-sm-2 control-label">Téléphone :</label>
<div class="col-sm-8" data-validate="phone">
<input type="tel" class="form-control" name="tel" id="tel" ng-model="tel" data-error="Le numero de tel est invalide" pattern="^[0-9]{1,}" maxlength="9" placeholder="(+221)77-745-89-65" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class='row'>
<div class="col-lg-8 col-lg-12 col-md-offset-1">
<div class="titleprghp">
<span class="prg">Informations Compte</span>
</div>
</div>
</div>
<!--<div class="blochp_contact">-->
<div class='row'>
<div class="col-lg-4 col-lg-offset-1">
<!--<form class="form-horizontal" role="form">-->
<div class="form-group">
<label for="numcpt" class="col-sm-2 control-label">Num Compte :</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="numcpt" id="numcpt">
</div>
</div>
<div class="form-group">
<label for="nom2" class="col-sm-2 control-label">Nom Client :</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="nom2" id="nom2">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 col-xs-12 control-label">Type Compte</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" id="inlineCheckbox1" value="simple"> Simple
</label>
<!-- <div class=" hidden-lg hidden-md col-xs-2"></div>-->
<label class="form-check-label">
<input class="form-check-input" type="radio" id="inlineCheckbox2" value="xeweul"> Xeweul
</label>
</div>
</div>
</div>
<div class="col-lg-4 col-lg-offset-0">
<!--<form class="form-horizontal" role="form">-->
<div class="form-group">
<label for="dateouv" class="col-sm-2 control-label">Date Ouverture</label>
<div class="col-sm-8" data-validate="date">
<input type="date" class="form-control" name="dateouv" id="dateouv" required="" data-format="DD/MM/YYYY">
</div>
</div>
<div class="form-group">
<label for="solde" class="col-sm-2 control-label">Solde</label>
<div class="col-sm-8">
<input type="number" class="form-control" name="solde" id="solde">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-5 col-lg-12 col-md-offset-1">
<div class="boutton">
<div class="col-lg-7 col-md-7 hidden-md hidden-xs"></div>
<div class="col-lg-1 col-md-1 col-xs-12">
<button name="submit" id="cancel" type="reset" value="reset" class="btn btn-default">Cancel<span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="col-lg-3 col-lg-offset-1 col-md-3 col-md-offset-2 col-xs-12 col-sm-push-1">
<button name="submit" id="submit" type="submit" value="submit" class="btn btn-default"><span class="glyphicon glyphicon-floppy-disk"></span>Enregistrer <span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Servlet的
@WebServlet(name = "Account_Servlet", urlPatterns = {"/account"})
public class AccountServlet extends HttpServlet {
@EJB
private CompteEJBLocal compteEJB;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.sendRedirect("/home/ajouter_compte.jsp");
System.out.println("ok");
String action = request.getParameter("action");
System.out.println("action " + action);
switch (action) {
case "getClient": {
String numCli = request.getParameter("numClient");
Client foundCli = compteEJB.unClient(numCli);
System.out.println("client " + foundCli);
ObjectMapper map = new ObjectMapper();
String json = map.writeValueAsString(foundCli);
response.getWriter().println(json);
}
break;
default: {
}
break;
}
}
5 个解决方案
解决方案1
0 2017-03-14 10:06:30
使用以下格式
$http({
url: 'account',
method: "GET",
params: {
action: "getClient",
numClient: $scope.numClient
}
})
.then(function(response) {
// success
},
function(response) { // optional
// failed
});
你没有在FORM中调用方法 $scope.getClient或它看起来像按钮
解决方案2
0 2017-03-14 10:35:06
解决方案3
0 2017-03-14 11:03:43
html文件使用data-ng-change="getClient(numClient)"而不是ng-blur="getClient()"
角度控制器文件
$scope.getClient = function(numClient) {
$http({
method: 'GET',
url: 'account',
params: {
action: "getClient",
numClient: numClient
}
}).success(function(data, status, headers, config) {
alert(ok);
$scope.nameCli = data.nomComplet;
$scope.adresse = data.adresse;
$scope.email = data.email;
$scope.tel = data.telephone;
$scope.sexe = data.sexe;
$scope.datenaiss = data.dateNaissance;
});
};
alert("ok");
}
解决方案4
0 2017-03-14 11:05:00
如果它可以帮助我如何显示表单的视图。 在此输入图像描述
表单加载不是由servlet控制，而是由javascript脚本控制
解决方案5
0 2017-03-15 09:49:44
我知道问题的根源，但我不知道如何解决它。 当我从菜单中分离表单并直接从servlet的do get加载它时，一切正常。我也可以从servlet和控制器打印消息。 但是一旦它回到菜单栏，即使表格显示，servlet和角度控制器都不能看到。 我用sidebarmenu的javascript代码Scrpit加载了from
我的homePage angular中的另一件事没有被使用。 那么是否可以在从homePage加载的页面上使用（点击sidebarmenu的一个元素）而不在homePage本身中使用它
如何将原型 JavaScript 框架添加到 Eclipse 中的 jee/jsp/servlet 项目？
[英]How to add Prototype JavaScript Framework to jee/jsp/servlet project in Eclipse?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.