执行其余URL后未调用jQuery成功函数 [英] Jquery success function is not called after executing the rest url

问题描述

我的表单详细信息如下:

My form details are below:

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

我的文件定义如下:

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

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

My custom button related code is below:

<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>

我具有以下功能，只需单击一个自定义按钮即可调用该功能:

I have the following function which is called upon clicking a custom button:

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服务，rest服务也返回了响应.令人惊讶的是，即使有来自休息服务的响应，也不会调用/调用成功函数.我的代码有问题吗?

The above Jquery code is calling my rest service successfully and the response is also returned by the rest service. Surprisingly the success function is not getting invoked/called even there is response from rest service. Is there something wrong with my code?

推荐答案

查看 https://api.jquery .com/trigger ，我认为您不能将函数作为第二个参数传递给"trigger"方法.该参数应该是包含一些额外选项的对象或数组，然后再将这些选项传递给事件处理程序函数(应在其他地方声明).您在此处定义的匿名函数将运行.因此，该表单的正常回发行为将继续进行，并且不会进行ajax调用.这就是为什么您似乎看到一个响应，但没有触发成功"或错误"回调的原因-首先从来没有ajax调用.

Looking at https://api.jquery.com/trigger, I don't think you can pass a function as the second parameter to the "trigger" method. That argument should be an object or array containing some extra options which are then passed to the event handler function (which should be declared elsewhere). The anonymous function you've defined there runs. Therefore, the normal postback behaviour of the form carries on regardless, and there's no ajax call. That's why you appear to see a response, but don't get the "success" or "error" callbacks triggered - there's never an ajax call in the first place.

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

What you've done is not the correct way to define an event on an element. The "trigger" method is intended to trigger an event which has already been defined previously. It can't be used to define the event handler itself.

这应该工作-它为表单的"submit"事件创建一个事件处理程序，该事件处理程序将取消默认的回发行为并改为运行ajax调用:

This should work - it creates an event handler for the "submit" event of the form, which suppresses the default postback behaviour and runs the ajax call instead:

$(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()函数及其所有引用.

You can then remove the createAttachmentRequest() function and all references to it.

只要任何<contact:contactbutton都在表单内向页面呈现<input type="submit"...或<button type="submit"...样式按钮，此方法就起作用.如果不是，则需要对此进行修改以输出正确的元素，否则它将不会触发表单的本机提交事件.

N.B. This will work as long as whatever <contact:contactbutton is renders an <input type="submit"... or <button type="submit"... style button to the page, within the form. If not, you need to amend this to output the correct element, otherwise it will not trigger the form's native submit event.

这篇关于执行其余URL后未调用jQuery成功函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！