JEE：带有jsp和angular的形式
[英]JEE : form with jsp and angular
问题描述
I'm a new in angular and I'm doing a little banking project. 
我是一个有角度的新人，我正在做一个小银行项目。 I'm using JSP and angular 1.3.2. 我正在使用JSP和angular 1.3.2。 I have a little form for creating an account. 我有一个创建帐户的小表格。 On the form when I blur after typing the customer number, if the customer exists, it should show the rest of the attributes like name adresse etc. But in my case, everything is showing. 在输入客户编号后我模糊的表格上，如果客户存在，它应该显示其他属性，如名称adresse等。但在我的情况下，一切都显示。 And even when I print a string in the servlet just to test nothings is coming. 即使我在servlet中打印一个字符串只是为了测试nothings即将来临。 In the angular controller also the "alert" is not showing anything. 在角度控制器中，“警报”也没有显示任何内容。 Now I want to understand what's not working. 现在我想了解什么不起作用。 Could anybody help me fix this, please! 请有人帮我解决这个问题！ Thanks in Advance. 提前致谢。 Here are codes. 这是代码。 Jsp Page 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 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
Use following format 使用以下格式
$http({
url: 'account',
method: "GET",
params: {
action: "getClient",
numClient: $scope.numClient
}
})
.then(function(response) {
// success
},
function(response) { // optional
// failed
});
You have not called the method $scope.getClient in FORM or button it looks like 你没有在FORM中调用方法 $scope.getClient或它看起来像按钮
解决方案2
0 2017-03-14 10:35:06
i've edited the controller code like this: compteCtrl 我编辑了这样的控制器代码： compteCtrl
I see nothing's even happening in the server console 我发现在服务器控制台中甚至没有发生任何事情
See server console 请参阅服务器控制
解决方案3
0 2017-03-14 11:03:43
html file use data-ng-change="getClient(numClient)" instead of ng-blur="getClient()" html文件使用data-ng-change="getClient(numClient)"而不是ng-blur="getClient()"
Angular Controller File 角度控制器文件
$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
a view of how im showing the form in case it can help. 如果它可以帮助我如何显示表单的视图。 enter image description here 在此输入图像描述
The form load is not controlled by a servlet but by javascript script 表单加载不是由servlet控制，而是由javascript脚本控制
解决方案5
0 2017-03-15 09:49:44
i know the source of the problem but i don't know how to fix it. 我知道问题的根源，但我不知道如何解决它。 When i separate the form from the menu and i load it directly from the do get of the servlet everything works fine.i can print message from the servlet and from the controller too. 当我从菜单中分离表单并直接从servlet的do get加载它时，一切正常。我也可以从servlet和控制器打印消息。 but once it's back to the menubar neither the servlet nor the angular controller can see the from even if the form is showing. 但是一旦它回到菜单栏，即使表格显示，servlet和角度控制器都不能看到。 I've loaded the from with a javascript code Scrpit for sidebarmenu 我用sidebarmenu的javascript代码Scrpit加载了from
Another thing in my homePage angular is not being used. 我的homePage angular中的另一件事没有被使用。 So is it then possible to use on a page which is loaded from the homePage(click of one element of the sidebarmenu) without using it in the homePage itself 那么是否可以在从homePage加载的页面上使用（点击sidebarmenu的一个元素）而不在homePage本身中使用它
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.