如何在ajax post call中发送不同类型的数据

时间:2014-12-12 06:03:06

标签: java javascript jquery ajax json

我有一个json对象,在同一个javascript中我有两个文件上传对象来上传文件。当我试图这样做时,请求不会进入控制器。我试过这样的。

data: {"jsonString":jsonString, "fd":"fd", "fd1":"fd1"},

任何人都知道在文件对象的json对象中实现这个的任何其他方法吗?我只获取之前上传的文件名,但现在在这篇文章中我想将其保存在特定的文件夹中。

编辑: 这不在表单提交我正在通过这个json对象值更新div内容,所以提交按钮不在div或jsp形式其对话框的按钮所以我从他们调用一个java脚本,并且我有json值以及我要将所有三个文件对象发送给控制器。

请参考我已经问过相同I am trying to do a ajax post call but request is not going to controller

的问题

我的控制器逻辑不确定需要写什么我刚试过

  @RequestMapping(value = "/submitAllInfo", method = RequestMethod.POST)
@ResponseStatus(value = HttpStatus.OK)
public @ResponseBody ModelAndView insertAllStepDetails(@RequestParam CommonsMultipartFile[] fileUpload,@RequestParam CommonsMultipartFile[] Uploadfile1,@RequestParam("UserName") String UserName) throws Exception{
    System.out.println("in submit controller !!!");
    System.out.println("ffffff"+UserName);

    return new ModelAndView("success");

}

编辑:::

我的js函数所有div都采用一种形式:

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

alert("in final submission form");
 var UserName=$('#uname').val();
 alert(UserName);


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

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

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

var file1=fileInput1.files[0];

formdata.append("Uploadfile1",file1); 

formdata.append("UserName",UserName);

$.ajax({
    url:contextPath +"/submitAllInfo",
    type: 'POST',
    data: formdata,
    async: false,
    success: function (data) {
        alert("in success");
       alert(data);
    },
      error: function (){
        alert("error has cocured");
     },
     cache: false

     });
     }
   </script>

2 个答案:

答案 0 :(得分:2)

尝试使用您的表单:

看看我能得到什么?只需将表单吐出到对话框中,从对话框移动时将数据添加到jsonObject。最后,您可以显示此内容,然后允许用户提交。

<form id="data" method="post" enctype="multipart/form-data">
    <div class='dialog'>
       <input type="text" name="foo" value="bar" />
    </div>
    <div class='dialog'>
       <input name="image" type="file" />
    </div>
    <div class='dialog'>
        <input name="frroo" type="file" />
        <button>Submit</button>
    </div>
</form>

$("form#data").submit(function(){
    var formData = new FormData($(this)[0]);
    colsole.log(formdata);
    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

答案 1 :(得分:1)

        <input type="file"  name="file1" id="file1"/>
        <input type="file"  name="file2" id="file2"/>



      <script type="text/javascript">

        var formdataAJX = new FormData();
        var fileUpload1 = $('#file1').val();
        if(fileUpload1 != undefined && fileUpload1 != null){

            formdataAJX.append("file1",fileUpload);
        }

        var fileUpload2 = $('#file2').val();
        if(fileUpload2 != undefined && fileUpload2 != null){

            formdataAJX.append("file2",fileUpload);
        }

        $.ajax({
        url:contextPath +"/submitAllInfo",
        type: 'POST',
        data: formdataAJX,
        async: false,
        success: function (data) {
           alert(data);
        },
        cache: false

        });

        </script>

并在Controller中将您的文件设为file1file2,然后您可以在我的示例中{/ 1}}的formData对象中附加其他参数

您应该使用formdataAJX方法添加表单参数,例如formdata.append()inputselect等等。