我有一个 mysql 数据库/Node 后端，连接到一个 Angular 前端，我正在查询它，专门向它发送表单中 3 个简单文本输入的数据。
我相信我的错误对于任何有 Node/Angular 经验的人来说都是微不足道的，因为我可以从文本输入之一成功发送我的数据库输入；但是，当我尝试检测并发送来自所有三个输入的数据时，它仅发送来自具有匹配 Controller 功能的输入的数据，作为脚本中的最后一个(三个输入中的一个)。
这是我的 html 文件和脚本
var button = document.getElementById("clickButton");
const app = angular.module('app',[]);
app.service('appService', ['$http', function($http){
return {
'getSuggestion' : function(suggestion,callback){
$http.post('/getSuggestion', {
'suggestion': suggestion
}).success(function (response) {
callback(response);
})
.error(function (data, status, header, config) {
callback({
'error': true,
'message': "Something went wrong."
});
});
}
}
}]);
app.controller('app', function($scope,appService) {
//message send Function
$scope.$watch('messageInput', function (newValue, oldValue) {
//null check
if (newValue !== null) {
//wait for the button to be pressed
button.onclick = function() {
alert("USERNAME");
//call server query function
appService.getSuggestion(newValue, function (response) {
$scope.suggestionCollection = response.rows;
});
};
}
});
$scope.$watch('messageInput2', function (newValue, oldValue) {
//null check
if (newValue !== null) {
//wait for the button to be pressed
button.onclick = function() {
alert("PASSWORD");
//call server query function
appService.getSuggestion(newValue, function (response) {
$scope.suggestionCollection = response.rows;
});
};
}
});
$scope.$watch('messageInput3', function (newValue, oldValue) {
//null check
if (newValue !== null) {
//wait for the button to be pressed
button.onclick = function() {
alert("PASSWORD");
//call server query function
appService.getSuggestion(newValue, function (response) {
$scope.suggestionCollection = response.rows;
});
};
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app" ng-controller="app">
<head>
<title>Node app</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="formFields">
<form class="defaultForm" id="loginForm">
<input class="loginField" type="text" name="username" ng-model="messageInput" placeholder="username"> <br>
<input class="loginField" type="text" name="password" ng-model="messageInput2" placeholder="password"> <br>
<input class="loginField" type="text" name="username" ng-model="messageInput3" placeholder="pass conf"> <br>
<button id="clickButton" class="submitButton">submit</button>
</form>
</div>
<!--<script src="Scripts/login.js"></script>-->
<script src="js/angular.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>最佳答案
每个输入都有一个 $watch，每个输入都有一个 submit()。这就是您仅发送更改的输入的原因。如果您想将它们全部发送到一起，您应该持有一个 submit()，这意味着一个 onClick() 将检查所有新值不为空并将它们发送到服务器，像这样:
$scope.$watch('allInput', function (newValues, oldValues) {
//null check
if (newValues.user !== null && newValues.pass !== null && newValues.pass2 !== null) {
//wait for the button to be pressed
button.onclick = function() {
alert("USERNAME");
alert("PASSWORD");
alert("PASSWORD CONF");
//call server query function
appService.getSuggestion(newValues, function (response) {
$scope.suggestionCollection = response.rows;
});
};
}
});
和 html:
<form class="defaultForm" id="loginForm">
<input class="loginField" type="text" name="username" ng-model="allInput.name" placeholder="username"> <br>
<input class="loginField" type="text" name="password" ng-model="allInput.pass" placeholder="password"> <br>
<input class="loginField" type="text" name="username" ng-model="allInput.pass2" placeholder="pass conf"> <br>
<button id="clickButton" class="submitButton">submit</button>
</form>
当然getSuggestion()也会改变:
app.service('appService', ['$http', function($http){
return {
'getSuggestion' : function(data,callback){
$http.post('/getSuggestion', {
'name': data.name,
'pass': data.pass,
'pass2': data.pass2
}).success(function (response) {
callback(response);
})
.error(function (data, status, header, config) {
callback({
'error': true,
'message': "Something went wrong."
});
});
}
}
关于javascript - 我想从多个文本输入中获取输入并将它们发送到我的数据库，但只有最后一个输入发送，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47708483/