Can not add or modify article in Angular

[Daniel Russell]

I have a problem, I have created a project for a social network. In a part of the project I'am using Angular routing to add, modify or delete  articles of the blog of the social media user. But the program do not add or modify the article, it can only delete it.

For example this is the page in which the user can write and add the article:

<h3 id="titoloArticolo">Write a new article</h3> <p class="p">Title: </p> <input type="text" class="form-control" placeholder="Inserisci un titolo" ng-model="article.title"/> <p class="p">Article text: </p> <textarea id="areaArticolo" ng-model="article.content"></textarea> <br/> <button style="margin-top: 30px;" class="btn btn-dark" ng-click="addArticle(article)">Publish your article</button>

And this is the Angular file correlate, in which there are also all the function:

var app = angular.module("app", ["ngRoute"]); var articoloDaModificare =  {}; var photoDaModificare = {}; var videoDaModificare = {}; app.config(function($routeProvider){ $routeProvider .when("/panoramica", { templateUrl: "Panoramica.html", controller: "panoramicaCtrl" }) .when("/articolo", { templateUrl: "ArticoloAdd.html", controller: "articoloCtrl" }) .when("/articles", { templateUrl: "ListArticoli.html", controller: "articoliCtrl" }) .when("/modifica", { templateUrl: "ArticoloModifica.html", controller: "modificaCtrl" }) .when("/modificaPhoto", { templateUrl: "PhotoModifica.html", controller: "photomodCtrl" }) .when("/modificaVideo", { templateUrl: "VideoModifica.html", controller: "videomodCtrl" }) .when("/pagine", { templateUrl: "Pagine.html" }) .when("/paginadd", { templateUrl: "AddPage.html" }) .when("/foto", { templateUrl: "AddFoto.html", controller: "addFotoCtrl" }) .when("/video", { templateUrl: "AddVideo.html" }) .when("/fotolist", { templateUrl: "FotoList.html", controller: "listFotoCtrl" }) .when("/videolist", { templateUrl: "VideoList.html", controller: "listVideoCtrl" }) .when("/analytics", { templateUrl: "Analytics.html" }) .when("/setting", { templateUrl: "SettingBlog.html" }) }); app.controller("panoramicaCtrl", function($scope, $http, $routeParams){ $scope.blog = {}; $scope.modifyTitle = (title) => { $http.put("CastleWeb?cmd=modificaTitolo&title="+title).then(function(res){ $scope.blog = res.data; console.log($scope.blog); }, function(error){ alert('something went wrong'); console.log(error); });   }; }); app.controller("articoloCtrl", function($scope, $http){ $scope.article = {}; $scope.addArticle = (article) => { $http.post("CastleWeb?cmd=aggiungiArticolo&article="+JSON.stringify($scope.article)).then(function(res){ $scope.article = res.data; console.log($scope.article); }, function(error){ alert('something went wrong'); console.log(error); }); }; }); app.controller("articoliCtrl", function($scope, $http, $routeParams){ $scope.articles = []; $scope.article = {}; $scope.articleData = () => { $http.get("CastleWeb?cmd=articoliLista").then(function(res){ $scope.articles = res.data; console.log($scope.articles); }, function(error){ alert('something went wrong'); console.log(error); }); }; $scope.articleData(); $scope.elimina = (id) => { $scope.article = {}; $http.delete("CastleWeb?cmd=deleteArticle&id="+id).then(function(res){ $scope.article = res.data; console.log($scope.article); }, function(error){ alert('something went wrong'); console.log(error); }); }; $scope.modifica = (article) => { console.log(article); articoloDaModificare = article; location.href="#!modifica"; }; }); app.controller("modificaCtrl", function($scope, $http, $routeParams){ $scope.article = articoloDaModificare; $scope.modificaArt = (article) => { $http.put("CastleWeb?cmd=modificaArticolo&article="+JSON.stringify($scope.article)).then(function(res){ $scope.article = res.data; console.log($scope.article); }, function(error){ alert('something went wrong'); console.log(error); }); }; }); app.controller("addFotoCtrl", function($scope, $http, $routeParams){ $scope.foto = {}; $scope.addFoto = () => { $http.post("CastleWeb?cmd=addPhoto&foto="+JSON.stringify($scope.foto)).then(function(res){ $scope.foto = res.data; alert($scope.foto); }, function(error){ alert('something went wrong'); console.log(error); }); }; }); app.controller("listFotoCtrl", function($scope, $http, $routeParams){ $scope.photo = {}; $scope.photos = []; $scope.listPhoto = () => { $http.get("CastleWeb?cmd=listaPhoto").then(function(res){ $scope.photos = res.data; console.log($scope.photos); }, function(error){ alert('something went wrong'); console.log(error); }); }; $scope.listPhoto(); $scope.deletePhoto = (id) => { $http.delete("CastleWeb?cmd=deletePhoto&id="+id).then(function(res){ $scope.photo = res.data; console.log($scope.photo); }, function(error){ alert('something went wrong'); console.log(error); }); }; $scope.modificaPhoto = (photo) => { console.log(photo); photoDaModificare = photo; location.href="#!modificaPhoto"; }; }); app.controller("photomodCtrl", function($scope, $http, $routeParams){ $scope.photo = photoDaModificare; $scope.photoMod = (photo) => { $http.put("CastleWeb?cmd=modificaPhoto&photo="+JSON.stringify($scope.photo)).then(function(res) { $scope.photo = res.data; console.log($scope.photo); }, function(error){ alert('something went wrong'); console.log(error); }); }; }); app.controller("listVideoCtrl", function($scope, $http, $routeParams){ $scope.videos = []; $scope.video = {}; $scope.listVideo = () => { $http.get("CastleWeb?cmd=listavideo").then(function(res){ $scope.videos = res.data; console.log($scope.videos); }, function(error){ alert('something went wrong'); console.log(error); }); } $scope.listVideo(); $scope.deleteVideo = (id) =>{ $http.delete("CastleWeb?cmd=eliminavideo&id="+id).then(function(res){ $scope.video = res.data; console.log($scope.video); }, function(error) { alert('Something went wrong'); console.log(error); }); } $scope.modificaVideo = (video) => { console.log(video); videoDaModificare = video; location.href="#!modificaVideo"; }; }); app.controller("videomodCtrl", function($scope, $http, $routeParam){ $scope.video = videoDaModificare; $scope.videoMod = (video) =>{ $http.put("CastleWeb?cmd=modificavideo&video="+JSON.stringify($scope.video)).then(function(res) { $scope.video = res.data; console.log($scope.video); }, function (error){ alert('Something went wrong'); console.log(error); }); }; });

I do not understand if there are some problem with the "stringify", but the alert messagge is "something went wrong", so I assume that it gives me error, and in the console of Eclipse is displayed this error message:

java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

[Ron McLeod]

You need to URL-encode your stringified JSON.  It will contain characters which are not permitted in a URI.

[Daniel Russell]

Ron McLeod wrote:You need to URL-encode your stringified JSON.  It will contain characters which are not permitted in a URI.

Thank you, now it works!