HTML — Angular JS с PHP с полем ввода и кнопкой отправки

У меня есть пользовательский интерфейс с полем ввода и кнопкой «Отправить», а также после ввода номера в поле и нажатия кнопки «Отправить». Я хочу, чтобы это перейти к файлу first.php, а second.php зависит от ответа first.php. В конце я хочу показать значение из second.php, не могли бы вы помочь мне в этом.

И я использую AngularJS с PHP И я создаю 2 функции в одном контроллере и вызываю 2 функции одновременно, нажав кнопку. Не могли бы вы предложить мне подход?

HTML-код

<html>
<div ng-controller="get_controller">
<input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number">
<span class="input-group-btn">
<button type="submit" ng-click="sendAccountNumber();geValues()" class="btn btn-primary">Submit</button>
</span>
</div>

<div ng-controller="get_controller">
<table>
<tbody>
<tr>
<th ng-repeat="list in personDetails">{{list.Name}}
</th>
</tr>
<tr>
<td class="features" ng-repeat="list in personDetails">{{list.Location}}
</td>
</tr>
</tbody>
</table>
</div>
</html>

AngularJS

   var app = angular.module('myApp', ["ngTable"]);
app.controller('get_controller', function($scope, $http) {

$scope.sendAccountNumber = function() {
var request = $http({
method: "post",
url: "first.php",
data: {
accountnumber: $scope.accountnumber
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}

});

/* Check whether the HTTP Request is successful or not. */
request.success(function(data) {
console.log("Account Number " + data + " Sent to first.php");
});
}$scope.geValues = function() {
$http({
method: 'POST',
url: 'second.php'
}).success(function(data) {
$scope.post = data;
$scope.personDetails = Employee;
})
},
});

2

Решение

Вы можете вызвать следующий вызов функции в качестве обещания первого вызова следующим образом:

    //First function
$scope.firstFunction = function(){
$http({
method: 'POST',
url: 'first.php',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: data
}).then(
function (response) {
var data = response.data;
$scope.secondFunction(data);
// not relevant
}, function (error) {
var data = error.data;
// not relevant
});
}
//Second function
$scope.secondFunction = function(data)
{
$http({
method: 'POST',
url: 'second.php',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: data
}).then(
function (response) {
var newData = response.data;
// not relevant
}, function (error) {
var newData = error.data;
// not relevant
});
}

И вызвать одну функцию firstFunction() только по нажатию кнопки.

<button type="button" ng-click="firstFunction();" class="btn btn-primary">Submit</button>

FYI,

  • Я бы порекомендовал использовать ng-submit() событие для form отправлять данные формы, а не отправлять с помощью события отправки вашей формы.
  • И еще одна вещь, зачем вам запрашивать два вызова AJAX?
    Вы можете выполнять обе операции на стороне сервера только в одном вызове.

Надеюсь, это поможет вам 🙂

1

Другие решения

Других решений пока нет …