I want to send a class array with ajax but, when I make an ajax request, the request does not reach the backend side. When I sent a string array request. It works great. But If the Array contains a class, it is as if no request is made.
This is my javascript class:
var image_base64_code = [];
class images_base64 {
constructor(id, base64, name) {
this.id = id;
this.base64 = base64;
this.name = name;
}
}
//***************************************
// there are some codes here. For information.
//***************************************
image_base64_code.push(new images_base64(preview_intex, image_base64,name));
This is my ajax request:
$('#Ajax').click(function () {
var ImageJsonText = JSON.stringify({ image_base64_code: image_base64_code});
$.ajax({
url: 'main.aspx/ImageSave',
dataType: 'json',
type: 'POST',
data: ImageJsonText,
traditional: true,
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert(data.d);
}
});
});
});
And my backend function:
[WebMethod]
public static bool ImageSave(RequestImage[] image_base64_code)
{
return 1;
}
public class RequestImage{
public string id;
public string base64;
public string name;
}
Use an object
var image_base64_code = {}; // object.
image_base64_code["images"] = [];
image_base64_code["images"].push( ... ); // add new here.
var ImageJsonText = JSON.stringify(image_base64_code);
JSON.stringify turns objects into strings, so change public static bool ImageSave(RequestImage[] image_base64_code) to accept a string.
public static bool ImageSave(string image_base64_code)
{
return 1;
}
Inside this method you can convert the string to RequestImage objects (deserialize) with built-in javascript deserializer or a library like JSON.NET (Newtonsoft).
Also see: JSON.stringify doesn't work with normal Javascript array
I want to be able to pass the value entered in the textbox, on a mouse click, to my AJAX controller.
Controller code:
#EnableWebMvc
#Controller
public class HelloWorldController {
public static class User {
private String name, surname;
int age;
public User(String name, String surname, int age) {
this.name = name;
this.surname = surname;
this.age = age;
}
public int getAge() {
return age;
}
public String getName() {
return name;
}
public String getSurname() {
return surname;
}
}
#RequestMapping("/hello")
public ModelAndView helloWorld() {
return new ModelAndView("home/hello.jsp", "message", "Spring MVC Demo");
}
#RequestMapping(value = "/hello/{name}", produces = "application/json")
public #ResponseBody User getUser(#PathVariable(value = "name") String name) {
return new User(name, "Surname", 25);
}
}
Relevant view code:
$.getJSON("hello/", {name: $('#username').val()} , function(obj) {
$("ul").append("<li>"+obj.name+"</li>");
});
// ...
<input type="text" name="username" id="username" >
So this doesn't work, when the button is clicked, nothing happens. However, when I change in my controller to #RequestParam it works, but I want it to work with #PathVariable so that the URL for the correct username gets displayed.
Where is the problem, how should I fix that?
It sounds like that because you're using GET method to pass your HTTP request the parameter (name) is passed via a query string.
That's why #RequestParam works and #PathVariable doesn't.
If you must do it with GET method then try to build your URL as follows:
/hello/" + $('#username').val() + "/"
and don't pass data with your ajax request.
Try to work with firebug or google developer tools in order to see what data is going to server and back to browser.
something like that:
$.getJSON(/hello/" + $('#username').val() + "/",
function(obj) {
$("ul").append("<li>"+obj.name+"</li>");
});
How I can get access to variable (which was added as attribute to Model in my controller) in JavaScript and how I can work with properties of it?
My model:
public class Category {
private Long id;
private String name;
private List<Recipe> recipes = new ArrayList<>();
}
My controller:
#RequestMapping(path = "/", method = RequestMethod.GET)
public String showAllCategories(Model model) {
List <Category> categories = categoryService.findAll();
model.addAttribute("categories", categories);
return "index";
}
On my web page I need to show all categories (no problem, using Thymeleaf th:each="category : ${categories}") and have ability add new category to categories variable and set its properties (id, name, recipes for example).
So, how I can get access to variable 'categories' in JavaScript, and how I can add new element and set properties in JavaScript?
You can make an ajax call to this method
// using jquery
$.ajax({
url:'/',
success:function(response){
// get the return pf the method here
// can be assigned to any variable
}
java method change
#RequestMapping(path = "/", method = RequestMethod.GET)
public String showAllCategories(Model model) {
//rest of code
return (the value which which you want to assign to model property);
}
Explore more about ajax
You have to create an API. Rest for example.
The idea is to create methods callable by javascript(via AJAX for example), and do the operations you need to do in java.
Here you have some pseudocode:
#RequestMapping(path = "/addCategory", method = RequestMethod.GET)
public boolean AddCategory(Model model) {
//Do your logic to add category
if (/*everything went good*/) return true;
else return fale;
}
Why you want to use Model?, when you can directly access the object as JSON:
JS Snippet using Angular:
$http.get('/app/get').then(function(response) {
$scope.categoryList = response.data;
}, function(response) {
});
JS Snippet using Jquery:
$.ajax({
url: "/app/get",
type: 'GET',
success: function(response) {
var categoryList = response.data;
console.log(categoryList);
}
});
Java Snippet:
#RestController
#RequestMapping
public class Controller {
#RequestMapping(path = "/get", method = RequestMethod.GET)
public List <Category> showAllCategories() {
return categoryService.findAll();
}
}
I have two small projects, backend spring-boot side is responsible for providing the data, and angularjs frontend part is just displaying that data. I am trying to post a json from angular side and spring-boot side consumes and sends a respond.
This is horse racing data in json; "jokey" means rider and contains rider information:
var list = {"horses": [{"horseId":45942,"horseName":"Decolte","raceId":8449,"kilo":61.0,"jokey":{"name":"AYETULLAH DEMİR","raceNumber":41,"first":1,"second":4,"third":0,"fourth":1},"ekuriId":0},
{"horseId":27520,"horseName":"Busıness Man","raceId":8449,"kilo":57.0,"jokey":{"name":"CİVAN ÖZŞAHİN","raceNumber":190,"first":7,"second":15,"third":18,"fourth":12},"ekuriId":0},
{"horseId":55856,"horseName":"Erselçuk","raceId":8449,"kilo":57.0,"jokey":{"name":"NAİL EREN","raceNumber":64,"first":2,"second":0,"third":4,"fourth":2},"ekuriId":0},
{"horseId":52940,"horseName":"Haşim Ağa","raceId":8449,"kilo":57.0,"jokey":{"name":"DOĞUKAN AYDOĞAN","raceNumber":380,"first":11,"second":18,"third":10,"fourth":24},"ekuriId":0},
{"horseId":53431,"horseName":"İhtiyar","raceId":8449,"kilo":57.0,"jokey":{"name":"CÜNEYİT GÖKÇE","raceNumber":598,"first":32,"second":52,"third":64,"fourth":65},"ekuriId":0},
{"horseId":51778,"horseName":"Urla Zamanı","raceId":8449,"kilo":57.0,"jokey":{"name":"ADEM ŞEN","raceNumber":280,"first":18,"second":25,"third":32,"fourth":32},"ekuriId":0},
{"horseId":51816,"horseName":"Wın Every Day","raceId":8449,"kilo":57.0,"jokey":{"name":"EMRE NALBANT","raceNumber":405,"first":19,"second":26,"third":36,"fourth":33},"ekuriId":0},
{"horseId":58650,"horseName":"Lıon Amed","raceId":8449,"kilo":52.0,"jokey":{"name":"CANER KARADEMİR","raceNumber":134,"first":7,"second":7,"third":8,"fourth":7},"ekuriId":0},
{"horseId":51239,"horseName":"Catch The Wınd","raceId":8449,"kilo":57.0,"jokey":{"name":"MÜSLÜM CANPOLAT","raceNumber":238,"first":5,"second":12,"third":12,"fourth":19},"ekuriId":0},
{"horseId":46263,"horseName":"Ian Tapp","raceId":8449,"kilo":58.0,"jokey":{"name":"ERDEM NUR TÜFEKÇİ","raceNumber":79,"first":3,"second":1,"third":4,"fourth":5},"ekuriId":0},
{"horseId":51647,"horseName":"Sılverado","raceId":8449,"kilo":57.0,"jokey":{"name":"ÜMİT DERYA ALTEKİN","raceNumber":1185,"first":48,"second":53,"third":64,"fourth":84},"ekuriId":0},
{"horseId":57231,"horseName":"Junıor Duru","raceId":8449,"kilo":58.0,"jokey":{"name":"BEDRİ TEPE","raceNumber":716,"first":45,"second":55,"third":50,"fourth":67},"ekuriId":0}
]};
It was basically an array but somebody on stackoverflow told the data inside ajax request should be an object so I added "horses:" to the front. The json is manually added inside the code.
This is http request:
$http({
url: 'http://localhost:8080/horseHistory',
method: 'POST',
contentType: "application/json",
data: list.horses,
headers: {
"Content-Type": "application/json"
}
}).success(function(data) {
console.log(data);
});
On the backend I just want to see a working http connection so it is mostly empty. This is spring-boot function:
#RequestMapping(value = "/horseHistory", method = RequestMethod.POST )
public ResponseEntity<Void> getHorseHistory(#RequestBody HorseRaceModel[] horseRaces) throws IOException {
System.out.println(horseRaces[0]);
return null;
}
HorseRaceModel:
package ganyan;
public class HorseRaceModel {
int horseId;
String horseName;
int raceId;
double kilo;
JokeyModel jokey;
int ekuriId;
public HorseRaceModel(int horseId, String horseName, int raceId, double kilo, JokeyModel jokey, int ekuriId) {
this.horseId = horseId;
this.horseName = horseName;
this.raceId = raceId;
this.kilo = kilo;
this.jokey = jokey;
this.ekuriId = ekuriId;
}
public int getHorseId() {
return horseId;
}
public void setHorseId(int horseId) {
this.horseId = horseId;
}
public void setHorseName(String horseName) {
this.horseName = horseName;
}
public String getHorseName() {
return horseName;
}
public int getRaceId() {
return raceId;
}
public void setRaceId(int raceId) {
this.raceId = raceId;
}
public double getKilo() {
return kilo;
}
public void setKilo(double kilo) {
this.kilo = kilo;
}
public JokeyModel getJokey() {
return jokey;
}
public void setJokey(JokeyModel jokey) {
this.jokey = jokey;
}
public int getEkuriId() {
return ekuriId;
}
public void setEkuriId(int ekuriId) {
this.ekuriId = ekuriId;
}
}
JokeyModel:
public class JokeyModel {
private String name;
private int raceNumber;
private int first;
private int second;
private int third;
private int fourth;
public int getSecond() {
return second;
}
public void setSecond(int second) {
this.second = second;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getRaceNumber() {
return raceNumber;
}
public void setRaceNumber(int raceNumber) {
this.raceNumber = raceNumber;
}
public int getFirst() {
return first;
}
public void setFirst(int first) {
this.first = first;
}
public int getThird() {
return third;
}
public void setThird(int third) {
this.third = third;
}
public int getFourth() {
return fourth;
}
public void setFourth(int fourth) {
this.fourth = fourth;
}
}
The error from Chrome console:
Failed to load resource: the server responded with a status of 400 (Bad Request) http://localhost:8080/horseHistory
The error from Java console:
nested exception is com.fasterxml.jackson.databind.JsonMappingException: Can not deserialize instance of java.util.HashMap out of START_ARRAY token
I'm not familiar with Spring Boot and I don't know why you have been told to post a JSON object instead of a JSON array, but I see that you are not doing it coherently.
You wrapped your JSON array in a JSON object called list, but by specifying data: list.horses you are still only passing the embedded JSON array. Since you want to send the whole JSON object, you should specify data: list instead.
Furthermore, I think that you need to define the wrapper model on the server side, which may be some class like this:
public class ListModel {
private List<HorseRaceModel> horses;
public List<HorseRaceModel> getHorses() {
return horses;
}
public void setHorses(List<HorseRaceModel> horses) {
this.horses = horses;
}
}
Finally, the method consuming the post should be instructed to parse the request body into a ListModel. This means to modify the method to something like this:
#RequestMapping(value = "/horseHistory", method = RequestMethod.POST )
public ResponseEntity<Void> getHorseHistory(#RequestBody ListModel horseRaces) throws IOException {
System.out.println(horseRaces.getHorses().get(0).getName());
return null;
}
Side note: I also modified the code to print the name of the first horse instead of the object pointer that would be printed by System.out.println(horseRaces.getHorses().get(0));. You may want to print something else instead. You may also want to use better names for the wrapper object and model (instead of list and ListModel)
Note from comment: Your HorseRaceModel class does not have an empty constructor, you need to provide one for deserialization to work
I have an AngularJS app that has to post data to a 3rd party URL. To get around the CORS browser issue, I am posting the data to my .net controller which will then post it to the 3rd party URL. In my javascript file, I've built the query string I want to pass to the 3rd party URL. Here is my code that posts to my .net controller:
var parms = "name=john&phone=1234567890&sex=male";
return $http({
url: '/UserForm/PostData/',
method: "POST",
data: parms
});
My c# controller:
[HttpPost]
public string PostData(String parms)
{
return "";
}
the parms variable in PostData is null. What do I need to do to pass my querystring string to my controller?
Can you try this? First - why don't you just define all parameters inside the controller post request definition? Second - I guess you have an error in your URL, you don't need the slash after "/UserForm/PostData" (If you don't use some custom routing in your MVC of course)
$http.post("/UserForm/PostData", { name: "john", phone: "1234567890", sex: "male" }).then(blahblahal....;
+
[HttpPost]
public string PostData(String name, String phone, String sex)
{
return "";
}
If this is for a WebApi controller, instead of trying to read parms as a parameter passed to the action, use ReadAsString to read the posted data. In your example the result should be the same value in your parms variable.
[HttpPost]
public IHttpActionResult PostData()
{
var parms = Request.Content.ReadAsStringAsync().Result;
// Submit parms to third-party api.
return Ok();
}
This task is more appropriate for WebApi, but if you need to use an MVC controller, you can read what was posted by reading Request.InputStream:
public ActionResult PostData()
{
string parms;
using (var sr = new System.IO.StreamReader(Request.InputStream))
{
parms = sr.ReadToEnd();
}
// Submit parms to third-party api.
return new EmptyResult();
}
You can try this.
[HttpPost]
public string PostData(System.Net.Http.Formatting.FormDataCollection form)
{
string name=form.get("name");
string phone=form.get("phone");
string sex=form.get("sex");
}
Or else you can try this solution too, you just need to add couple of lines.
public class PersonData
{
public string name { get; set; }
public string phone { get; set; }
public string sex { get; set; }
}
[HttpPost]
public string PostData([FromBody]PersonData form)
{
string name=form.name;
string phone=form.phone
string sex=form.sex;
}