当前位置: 首页 > 知识库问答 >
问题:

我如何通过点击同一个JSP页面的两个不同按钮来开发两个调用ajax,其中控制器是不同的?

徐新荣
2023-03-14
 function onuploadCall(){

    var file = $('[name="file"]');
    console.log(file);
   var filename = $.trim(file.val());
   console.log(filename);
     //var imgContainer = $('#imgContainer');

    var formData = new FormData();
    formData.append('file', jQuery('input[type=file]')[0].files[0]);

    $.ajax({
        url: "http://localhost:8080/EmployeeRegistrationForm/echofile",
        type: "POST",
        async:true,
        data: formData,
        enctype: "multipart/form-data",
        processData: false,
        modelAttribute:'uploadedFile',
        contentType: true,

       success: function(response){

            var obj = JSON.parse(response);
            alert(response);

        },

        error: function(){                      
            alert('Error while request..');
        }
    });
     /*  }).done(function(data) {
         // imgContainer.html('');
          var img = '<img src="data:' + data.contenttype + ';base64,'
              + data.base64 + '"/>';
         alert("success");
         // imgContainer.append(img);
      }).fail(function(jqXHR, textStatus) {
          //alert(jqXHR.responseText);
          alert('File upload failed ...');
      });    */
}
function madeAjaxCall(){


    array();
     var gender = $('#gender').val();
     var blood = $('#blood').val();


    $.ajax({
        type: "post",
        url: "http://localhost:8080/EmployeeRegistrationForm/employee",
        cache: false,       
        async:false,


       data:'name=' + $("#name").val() 
           +"&fname=" + $("#fname").val() 
           +"&mname=" + $("#mname").val() 
           +"&nid=" + $("#nid").val() 
           +"&age=" + $("#age").val()
           +"&blood=" + blood
           +"&gender=" + gender 
           +"&caddress=" + $("#caddress").val() 
           +"&paddress=" + $("#paddress").val()
           +"&paddress=" + $("#paddress").val()
           +"&pdegree=" + $("#pdegree").val()
           +"&puniversity=" + $("#puniversity").val()
           +"&pyear="+ $("#pyear").val()
           +"&presult=" + $("#presult").val()
           +"&mdegree=" + $("#mdegree").val()
           +"&muniversity=" + $("#muniversity").val()
           +"&mresult=" + $("#mresult").val()
           +"&myear=" + $("#myear").val()
           +"&bdegree=" + $("#bdegree").val()
           +"&buniversity=" + $("#buniversity").val()
           +"&bresult=" + $("#bresult").val()
           +"&byear=" + $("#byear").val()
           +"&hdegree=" + $("#hdegree").val()
           +"&college=" + $("#college").val()
           +"&hresult=" + $("#hresult").val()
           +"&hyear=" + $("#hyear").val()
           +"&sdegree=" + $("#sdegree").val()
           +"&school=" + $("#school").val()
           +"&sresult=" + $("#sresult").val()
           +"&syear=" + $("#syear").val()
           +"&date=" + $("#date").val()
           +"&department=" + $("#department").val()
           +"&location=" + $("#location").val()
           +"&company=" + company
           +"&from=" + from
           +"&to=" + to
           +"&year=" + year
           +"&organization=" + organization
           +"&topic=" + topic
           +"&duration=" + duration,

        success: function(response){

            var obj = JSON.parse(response);
            alert(response);

        },

        error: function(){                      
            alert('Error while request..');
        }
    });
}
@Controller
public class imageUploadController {

     @RequestMapping(value = "/echofile",method = RequestMethod.POST)
        public @ResponseBody HashMap<String, Object> echoFile(MultipartHttpServletRequest request,
                HttpServletResponse response ,  @ModelAttribute("uploadedFile") UploadedFile upldfile) throws Exception {

            InputStream inputStream = null;
            OutputStream outputStream = null;
           MultipartFile multipartFile = request.getFile("file");

            MultipartFile file = upldfile.getFile();
            String fileName = multipartFile.getOriginalFilename();
            System.out.println("vcvvvvvvvv"+fileName);
            upldfile.setFile(file);

            Long size = file.getSize();
            String contentType = multipartFile.getContentType();

            InputStream stream = multipartFile.getInputStream();
            byte[] bytes = IOUtils.toByteArray(stream);

            HashMap<String, Object> map = new HashMap<String, Object>();
            map.put("fileoriginalsize", size);
            map.put("contenttype", contentType);
            map.put("base64", new String(Base64Utils.encode(bytes)));

            try {


                inputStream = file.getInputStream();

                   File newFile = new File("E:/Java_Project/EmployeeRegistrationForm/src/main/webapp/resources/image/"+ fileName);
                   if (!newFile.exists()) {
                    newFile.createNewFile();
                   }
                   outputStream = new FileOutputStream(newFile);
                   int read = 0;
                  // byte[] bytes = new byte[1024];

                   while ((read = inputStream.read(bytes)) != -1) {
                    outputStream.write(bytes, 0, read);
                   }
                  } catch (IOException e) {
                   // TODO Auto-generated catch block
                   e.printStackTrace();
                  }

            return map;
        }


}

Evere:路径为[/EmployeeRegistrationForm]的上下文中servlet[dispatcher]的servlet.Service()引发异常[请求处理失败;嵌套异常为org.springframework.web.bind.annotation.support.handlerMethodInvocationException:未能调用处理程序方法[public java.util.hashmap EmployeeRegistrationForm.Controller.ImageUploadController.echofile(org.springframework.web.multipart.multipartttpServletRequest,

下面是我的dispatch-servlet:

<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:context="http://www.springframework.org/schema/context"
 xmlns:mvc="http://www.springframework.org/schema/mvc" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="
        http://www.springframework.org/schema/beans     
        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/context 
        http://www.springframework.org/schema/context/spring-context-3.0.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

 <context:component-scan base-package="EmployeeRegistrationForm.controller" />
<mvc:resources mapping="/resources/**" location="/resources/" />
 <mvc:annotation-driven />
 <mvc:default-servlet-handler />
  <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="1048576"/>
    </bean>


</beans>

为什么会显示这个错误???当我输入文本数据时,它在controller/Employee中被称为ajax调用,它工作。但是当我试图上传一个文件并通过在同一个jsp页面和同一个controller/EchoFile中单击upload按钮调用ajax时,它会显示这个错误。问题出在哪里?

这里是完整的jsp页面

共有1个答案

廖君昊
2023-03-14

我在我的项目上改变了几件事。在jQuery上:

function uploadImage() {

            var file = $('[name="file"]');
            //var imgContainer = $('#imgContainer');

            var formData = new FormData();
            formData.append('file', jQuery('input[type=file]')[0].files[0]);
            var filename = $.trim(file.val());

            if (!(isJpg(filename) || isPng(filename))) {
                alert('Please browse a JPG/PNG file to upload ...');
                return;
            }

             $.ajax({
                url: "http://localhost:8080/EmployeeRegistrationForm/echofile",
                type: "POST",
                data: new FormData(document.getElementById("fileForm")), 
                //data: formData,
                enctype: 'multipart/form-data',
                processData: false,
                aync: false,
                modelAttribute:'uploadedFile',
                headers: {'Content-Type': 'multipart/form-data'},
                contentType: false,
             /*  }).done(function(data) {

                 var img = '<img src="data:' + data.contenttype + ';base64,'
                      + data.base64 + '"/>';
                  alert("success");

             }).fail(function(jqXHR, textStatus) {

                  alert('File upload failed ...');
              });  */

            success: function(response){

                var obj = JSON.parse(response);
                alert(response);

            },

            error: function(){                      
                alert('Error while request..');
            }
        });   
        }

而我的控制者是:

@RequestMapping(value = "/echofile",method = RequestMethod.POST)
        public @ResponseBody HashMap<String, Object> echoFile(HttpServletRequest  request,
                HttpServletResponse response ,  @ModelAttribute("uploadedFile") UploadedFile upldfile) throws Exception {
         HashMap<String, Object> map = new HashMap<String, Object>();

         if(request instanceof MultipartHttpServletRequest){

             InputStream inputStream = null;
                OutputStream outputStream = null;
              // MultipartFile multipartFile = request.getFile("file");

                MultipartFile file = upldfile.getFile();
                String fileName = file.getOriginalFilename();
                System.out.println("vcvvvvvvvv"+fileName);
                upldfile.setFile(file);

                Long size = file.getSize();
                String contentType = file.getContentType();

                InputStream stream = file.getInputStream();
                byte[] bytes = IOUtils.toByteArray(stream);


                map.put("fileoriginalsize", size);
                map.put("contenttype", contentType);
                map.put("base64", new String(Base64Utils.encode(bytes)));

                try {


                    inputStream = file.getInputStream();

                       File newFile = new File("E:/Java_Project/EmployeeRegistrationForm/src/main/webapp/resources/image/"+ fileName);
                       if (!newFile.exists()) {
                        newFile.createNewFile();
                       }
                       outputStream = new FileOutputStream(newFile);
                       int read = 0;
                      byte[] byt = new byte[1024];

                       while ((read = inputStream.read(byt)) != -1) {
                        outputStream.write(byt, 0, read);
                       }
                      } catch (IOException e) {
                       // TODO Auto-generated catch block
                       e.printStackTrace();
                      }


         }
         return map; 


         }

这是我的完整jsp页面

 类似资料:
  • 我需要创建一个按钮,如下所示: HTML 如何在JS文档中指定这些函数?

  • 两个(切换)按钮是否可能在片段之间具有同步行为?即:当按钮A在片段A中打开时,我希望按钮B在片段B中的外观也显示为打开。 我该怎么做呢?最终目标是在任何一个片段上都有一个全局按钮。

  • 问题内容: 我运行foo.com。我在foo.com中有两个不同的应用程序:一个是foo.com/bar,另一个是foo.com/example。我使用会话来跟踪有关用户登录的信息,但是如果用户从foo.com/bar转到foo.com/example,则foo.com/example会看到用户从foo.com/启动的会话并使用该信息。我的问题是,如何同时为每个目录进行两个不同的会话? 问题答案:

  • 我花了几个小时试图找到解决我问题的办法,但似乎找不到合适的办法。提前感谢您的协助! 我有一个html表单: 我想要两个提交按钮: 我想第一个提交按钮有formindb_hoh_1.php点击时的动作和第二个提交按钮有formindb_hoh_2.php的动作但我不确定如何使一个按钮有一个动作和有另一个按钮有不同的动作。

  • 我有两个数据。表X和表Y。 列 X: Y 中的值列: 创建两个data.tables: 我设置了 X 和 Y 的键: 现在,我尝试通过X中的< code>id和Y中的< code>ID来连接X和Y: All引发错误,指出参数中的列名无效。 我查阅了data.table的手册,发现< code>merge函数不支持< code>by.x和< code>by.y参数。 如何在不更改列名的情况下通过不同

  • 问题内容: 我的问题很简单。我想在Elastica的一个查询中组合两个过滤器,一个filter_bool和一个filter_range。该代码是 我不能在$ elasticaQuery中将两个过滤器放在一起。请给我任何帮助! 谢谢! 问题答案: 为什么不将范围过滤器添加为过滤器中的另一个术语: 您需要在布尔过滤器中使用过滤器,而不是查询。注意我已经使用而不是您正在使用的范围查询。 另外,您知道您使