Присвоение значения ng-init из результата Ajax
У меня есть форма с одним полем ввода для отправки student id через AJAX, и я получаю некоторый результат JSON из запроса AJAX. Теперь возвращаемые данные из запроса AJAX должны быть присвоены ng-init в поле ввода (Телефон) ниже формы. Пожалуйста, помогите мне, как присвоить это значение ng-init, Спасибо!
HTML
<div ng-app="">
<form id="std_form">
<input type="text" name="sid" id="sid">
<input type="submit">
</form>
<input type="text" name="phone" ng-model="phone" ng-init="" id="phone">
Ph: {{phone}}
</div>
JQuery
$('#std_form').submit(function(e){
e.preventDefault();
var val = $('#sid').val();
var dataString = "sid=" + val;
$.ajax({
type: "POST",
url: "post_process.php",
data: dataString,
dataType: 'json',
success: function(data){
$('#phone').val(data.phone);
}
});
});
post_process.php
<?php
if(ISSET($_POST['sid'])) {
$sid = $con->real_escape_string($_POST['sid']);
$sql = "SELECT phone FROM std_detials WHERE sid = $sid";
$result = $con->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
$phone = $row['phone'];
}
$json = array('phone' => $phone);
$json = json_encode($json);
echo $json;
}
?>
Решение
Вы не используете ng-модель для поля id студента. Когда в угловых делай как говорит угловой.
Код представляет собой смесь традиционных методов представления PHP и затем вызова ajax через Jquery. Постарайтесь по возможности устранить такие практики и должным образом обожать рамки.
Попробуйте этот код. Понять и применить.
Коротко:
Я использовал Angular’s $http после звонка вместо jquery $.ajax, Вы можете удерживать тот же вызов или использовать вызов нативного ангуляра.
Удалена некоторая ненужная разметка. Добавлена ng-модель для ввода идентификатора студента, функция ng-click для кнопки, используемой для подачи, и несколько структурированный код. Если у вас есть отдельный файл services.js для проекта, добавьте туда код сервиса или просто добавьте новый сервис, как я сделал в коде здесь.
Так что в основном вам не нужен ng-init для этой проблемы. Это следует использовать в редких ситуациях. Пожалуйста, прочитайте документы здесь. https://docs.angularjs.org/api/ng/directive/ngInit
Надеюсь, поможет ! дайте мне знать в случае каких-либо вопросов.
<div ng-app="myApp">
<form id="std_form">
<input type="text" ng-model="sid">
<button ng-click="submitSid()"></button>
</form>
<input type="text" ng-model="phone">
Ph: {{phone}}
</div>
JS
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['StudentService', function(StudentService){
$scope.submitSid = function(){
var data = {sid: $scope.sid};
StudentService.getStudentDetails(data).then(function(res){
console.log(res);
$scope.phone = res.phone; // Or change to res.paramName. Just check in console to confirm the res logged.
})
}
}]);
app.factory('StudentService', ['$http', '$httpParamSerializerJQLike', function($http, $httpParamSerializerJQLike){
var getStudentDetails = function(data){
var params = $httpParamSerializerJQLike(data);
return $http({
method: "POST",
url: "post_process.php",
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'},
data: params
}).then(function(response){
return response.data;
});
}
return {
getStudentDetails : getStudentDetails
}
}]);
Другие решения
Других решений пока нет …