I am trying to do a ajax post call but request is not going to controller

Question

Hi I am trying to post 3 things json object and 2 file object but request is not going to controller pls find below code :

java script funtion:

<script type="text/javascript">
function submitAllDetails(){

var jsonObj=[{
        name:name,  
        age:age,
        rollno:rollno,
        add:add,

}];
var jsonString=JSON.stringify(jsonObj);
alert(jsonString);

 var fileInput=document.getElementById("Uploadfile"); 

    var file=fileInput.files[0];
    var fd = new FormData();
    fd.append("fileUpload",file);

    var fileInput1=document.getElementById("Uploadfile2"); 

    var file1=fileInput1.files[0];
    var fd1 = new FormData();
    fd1.append("fileUploadnew",file1);

$.ajax({
    url:contextPath +"/submitAllInfo",
    type:"POST", 
    contentType: "application/json; charset=utf-8",
    data: {jsonString:"jsonString", fd:"fd", fd1:"fd1"},
    async: false,    
    cache: false,    
    processData:false,
    success: function(response){
        alert("in success***");

    },
    error: function(){
        alert("error has occured"); 

        }
    });
 }
 </script>

Contorller code :

@RequestMapping(value = "/submitAllInfo", method = RequestMethod.POST)
public @ResponseBody ModelAndView insertAllStepDetails(@RequestParam("jsonString") String jsonString,@RequestParam("fd") CommonsMultipartFile[] fileUpload,@RequestParam("fd1") CommonsMultipartFile[] fileUploadnew){
    System.out.println("in submit controller !!!");


    return new ModelAndView("success");

}

I doubt the problem with the syntax of the line data: {jsonString:"jsonString", fd:"fd", fd1:"fd1"}, not sure what is the issue it always going in error block.

Any suggestion

thanks @ darshan and @ alok for your reply guys but still its not invoking the controller — user07, Dec 11 '14 at 11:10
This question is similar to http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery — ManojP, Dec 11 '14 at 11:20
@ManojP thanks for the reply but if alone i have to send file that is working for me too now i want to send 3 object 1 json and 2 fileobject let me know if you have idea ? — user07, Dec 11 '14 at 11:25
hey pravin thanks for your reply i am not using firefox as of now — user07, Dec 14 '14 at 09:43

İlker Korkut · Answer 1 · 2014-12-11T11:46:11.100

0

data: {jsonString:"jsonString", fd:"fd", fd1:"fd1"} in here you have to remove quotes from jsonString parameter value because you have setted your json object stringified. And add quotes to your first parameters.

Here is your updated code.

<script type="text/javascript">
function submitAllDetails(){

// Why usint [] brackets? not needed..
var jsonObj={  
        name:name,  
        age:age,
        rollno:rollno,
        add:add,

};
var jsonString=JSON.stringify(jsonObj);
alert(jsonString);

 var fileInput=document.getElementById("Uploadfile"); 

    var file=fileInput.files[0];
    var fd = new FormData();
    fd.append("fileUpload",file);

    var fileInput1=document.getElementById("Uploadfile2"); 

    var file1=fileInput1.files[0];
    var fd1 = new FormData();
    fd1.append("fileUploadnew",file1);

$.ajax({
    url:contextPath +"/submitAllInfo",
    type:"POST", 
    contentType: "application/json; charset=utf-8",
    data: {"jsonString":jsonString, "fd":fd, "fd1":fd1}, // you have setted json in jsonString varible
    async: false,    
    cache: false,    
    processData:false,
    success: function(response){
        alert("in success***");

    },
    error: function(){
        alert("error has occured"); 

        }
});

edited Dec 11 '14 at 11:46

answered Dec 11 '14 at 11:01

İlker Korkut

3,129
3
30
51

thanks for your reply but still controller is not getting invoked and i am getting the value of name like this var name=document.forms["name"]["usename"].value; i did'nt get this // Why usint [] brackets? not needed..? – user07 Dec 11 '14 at 11:11
do you have console error and if exists in which line? – İlker Korkut Dec 11 '14 at 11:15
ilker i don't have console error pls let me know how i can find is it on browser side to debug javascript ? once pls have a look to my controller argument is it correct or any thing i missing thr ? – user07 Dec 11 '14 at 11:21
i mean debug javascript, in chrome or firefox press F12 to open developer tools then in Source tab you will see your static and html files. Try to add breakpoint on js file or inline javascript code. Then you can inspect your varibles, while debugging F8 button stops on your breakpoint , F10 steps over functions and you can clearly inspect. If you find an error, comment here. – İlker Korkut Dec 11 '14 at 11:25
hey i could see the problem with the contentType as i am sending a file also it should be multipart-formdata – user07 Dec 11 '14 at 11:48
can we do same in any other way – user07 Dec 11 '14 at 12:32
you can use plugins if you want, there are a lot of example https://blueimp.github.io/jQuery-File-Upload/ one of them.. – İlker Korkut Dec 11 '14 at 12:49

score 0 · Answer 2 · answered Dec 11 '14 at 11:32

0

You can try below code :

var file_data = $("#UploadedFile").prop("files")[0];         
var form_data = new FormData();                   
form_data.append("file", file_data)                
form_data.append("user_id", 123)

answered Dec 11 '14 at 11:32

ManojP

6,113
2
37
49

I am trying to do a ajax post call but request is not going to controller

2 Answers2

Linked