Question

我的表格详情如下：

<form id="CreateAttachmentForm" method="post"  enctype="multipart/form-data"  action="../../uploadFile" >

我的文件定义如下：

<input type="file" id="fileupload1" name="fileupload1" accept="image/*,application/pdf"    "/>

我的自定义按钮相关代码如下：

<contact:contactbutton
        id="printButton"
        style="position:relative; width:90px; top:27px; height:30px; left:160px;"
        textTop="7px"
        defaultButton="false"
        tabindex=""
        accesskey="C"
        onClickEx="createAttachmentRequest();"
        onfocus="if(event.altKey){click();}">
            <u>C</u>reate
</contact:contactbutton>

我有以下功能，单击自定义按钮时会调用该功能：

function createAttachmentRequest(){
alert("ONE");
$("#CreateAttachmentForm").trigger("submit", function() {
var formData = new FormData($(this)[0]);
alert("TWO");

$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/uploadFile',
    type: 'POST',
    data: formData,
    async: false,
    success: function (data) {
        alert("test");
        alert(data)
    },
            cache: false,
    contentType: false,
    processData: false
});

return false;

}）;

上面的Jquery代码成功调用了我的rest服务，其余服务也返回了响应。令人惊讶的是，即使有来自休息服务的响应，也不会调用/调用成功函数。我的代码有问题吗？

Answer 1

查看https://api.jquery.com/trigger，我认为您不能将函数作为第二个参数传递给＆＃34;触发器＆＃34;方法。该参数应该是一个包含一些额外选项的对象或数组，然后将这些选项传递给事件处理函数（应在其他地方声明）。您在那里定义的匿名函数运行。因此，表单的正常回发行为无论如何都会继续，并且没有ajax调用。这就是为什么你似乎看到了回应，但没有得到成功＆＃34;或＆＃34;错误＆＃34;回调被触发 - 首先从来没有ajax调用。

您所做的并不是在元素上定义事件的正确方法。＆＃34;触发＆＃34;方法旨在触发先前已定义的事件。它不能用于定义事件处理程序本身。

这应该有效 - 它为＆＃34;提交＆＃34;创建一个事件处理程序。表单的事件，它会抑制默认的回发行为并改为运行ajax调用：

$(document).ready(function() {
  $("#CreateAttachmentForm").submit(function(event) {
    event.preventDefault(); //stop default postback behaviour.
    $.ajax({
      url: 'http://HDDT0214:8080/pqawdTestWebApp/uploadFile',
      type: 'POST',
      data: formData,
      success: function (data) {
        alert("test");
        alert(JSON.stringify(data));
      },
      error: function(jqXHR, errorThrown, textStatus) {
        alert("Ajax error: " + jqXHR.status + " - " + jqXHR.statusText);
        console.log(jqXHR.responseText);
      },
      contentType: false,
      processData: false
    });
  });
});

然后，您可以删除createAttachmentRequest()函数及其所有引用。

N.B。只要<contact:contactbutton在表单内向页面呈现<input type="submit"...或<button type="submit"...样式按钮，这将有效。如果没有，你需要修改它以输出正确的元素，否则它不会触发表单的本机提交事件。

执行其余URL

1 个答案: