ajax call on angularjs

Я пытаюсь проверить ввод числа с помощью angularjs. Страница работает по своему усмотрению, однако она не работает, когда я вызываю страницу с помощью ajax. Любая помощь или совет будут оценены!ajax call on angularjs

Рабочей angularjs jlgtest3.jsp ...

<div ng-app="total"> 
<script> 
angular.module('total', []) 
.controller('totalController', ['$scope', function($scope) { }]); 
</script> 

<form name="totalForm" ng-controller="totalController"> 
<input name="totalHours" ng-model="total" type="number" value="" /> 
<p ng-show="totalForm.totalHours.$error.number">Not valid number!</p> 
</form> 
</div> 
</html>

Не работаю с Ajax вызовом (jlgtest4.jsp вызова jlgtest3.jsp) ...

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<script> 
function newajax() { 
var xRequest1; 
    if(window.XMLHttpRequest) 
    { 
     xRequest1=new XMLHttpRequest(); 
    } else { 
     xRequest1=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xRequest1.onreadystatechange=function() 
    { 
     if((xRequest1.readyState==4) && (xRequest1.status==200)) 
     { 
      document.getElementById("test").innerHTML=xRequest1.responseText; 
     } 
    } 
    var urlencode = "jlgtest3.jsp"; 

    xRequest1.open("post",urlencode,true); 
    xRequest1.send(); 
} 
</script> 
</head> 

<input type="button" onclick="newajax()" value="button" /> 
<div id="test"> 

</div> 
</html>

Я попытался угловой Аякс позвоните, как предложили некоторые люди, но я не смог заставить его работать ...

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 

<div ng-app="total"> 
<script> 
angular.module('total', []) 
.controller('totalController', ['$scope', function($scope) { 
    $http.POST("jlgtest3.jsp").then(function(response) { 
     $scope.test = response.data; 
    }); 
}]); 
</script> 
<div ng-controller="totalController"> 
<input type="button" value="button" /> 
{{test}} 
</div> 

</div> 
</html>

источник

2015-09-10 jeeves2007

Используя обновленный код, проверьте консоль на наличие ошибок и дважды проверьте сетевую панель, чтобы проверить, был ли выполнен запрос AJAX и результат. –

Я отвечал на этот вопрос еще раз, но немного более упрощенным и Монсефу Хассейн-бек был в состоянии ответить на мой вопрос Use Ajax to put external angularjs element in html page

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<script> 
angular.module('myApp', []) 
.controller('myController', ['$scope', function($scope) { }]); 
</script> 
<script> 

function newajax() { 
var xRequest1; 
    xRequest1=new XMLHttpRequest(); 
    xRequest1.onreadystatechange=function() 
    { 
     if((xRequest1.readyState==4) && (xRequest1.status==200)) 
     { 
      document.getElementById("test").innerHTML=xRequest1.responseText; 
      angular.bootstrap(document.getElementById('test'), ['myApp']); 
     } 
    } 
    xRequest1.open("post","jlgtest.html",true); 
    xRequest1.send(); 
} 
</script> 

<input type="button" value="button" onClick="newajax()" /> 
    <div id="test"> 

    </div> 
</div> 
</html>

В принципе мне нужно добавить angular.bootstrap строку кода, и angular.module (... сценарий должен был быть в моей главной странице

это называется кодовой страницы ...

<html> 
<div ng-app="myApp"> 
<form name="myForm" ng-controller="myController"> 
    <input name="numberField" ng-model="myModel" type="number" value="" /> 
    <p ng-show="myForm.numberField.$error.number">Not valid number!</p> 
</form> 
</div> 
</html>

источник

2015-09-15 13:39:27 jeeves2007

Если вы используете Angular, вам следует рассмотреть возможность использования $http service или даже $resource service. Эти абстрактные запросы ajax в гораздо более простой форме. Таким образом, вместо

xRequest1.open("post",urlencode,true); 
xRequest1.send(); 

...etc...

Вы могли бы иметь что-то вроде:

$http.POST(urlencode).then(function(response) { 

    document.getElementById("test").innerHTML=response.data; 
    // do other stuff with the response 
});

И это будет инкапсулировать по существу всей newajax функции.

Что касается ответа @messerbill, вы не должны делать $ http-звонки в своем контроллере. Они лучше используются в сервисе или на заводе, которые вы затем вводите в контроллер. Контроллеры предназначены для бизнес-логики и не должны обрабатывать выборку и отправку данных.

источник

2015-09-10 15:52:28 arahansen

вы также можете использовать стандартный вызов Ajax, но лучше использовать угловой способ $ http. Вы должны называть его внутри своего углового контроллера.

XMLHttpRequest является объектом, используемым Ajax - https://en.wikipedia.org/wiki/XMLHttpRequest

https://docs.angularjs.org/api/ng/service/$http

обновленного ответа

Почему бы вам не использовать Угловые на пути его означал использовать? Вы должны отправить свой пост внутри своего углового обслуживания или контроллера. Не управлять вашим DOM, если вы используете AngularJS, как вы делали здесь:

document.getElementById("test").innerHTML=response.data;

istead вы должны сделать это таким образом:

angular.module('total', []) 
.controller('totalController', ['$scope', function($scope) { 
    $http.POST("yourURL").then(function(response) { 
     $scope.test = response.data; 
    }); 
}]); 
//template 
<input type="button" value="button" /> 
<div ng-controller="totalController"> 
    {{test}} 
</div> 
</html>

Я не проверял это, но он должен работать - рядом время создать скрипку;)

источник

2015-09-10 15:52:46 messerbill

Я пробовал ваш блок кода, он не работал. {{test}} отображается как {{test}} вместо рендеринга. Я пытался сделать скрипку, но я не думаю, что вы можете с ajax, так как у вас есть 2 страницы, с которыми вы имеете дело. Извините Im newb, если вы можете сделать скрипку с кодом, я был бы признателен @messerbill – jeeves2007

ajax call on angularjs

ответ

Смежные вопросы