jQuery ajax後在控制檯上工作，但不是從頁面上

我無法從我做的任何搜索中找到答案。jQuery ajax後在控制檯上工作，但不是從頁面上

我在HTML使用錨標籤一個簡單的按鈕：

<a id="beginUpload" href='/upload' class='button-style'>Upload</a>

的數據是從與ID爲「文件」的HTML輸入元件產生。

我jQuery的方法如下：

$("#beginUpload").click(function() { 
    var data = { 
     mimeType : document.getElementById('file').files[0].type, 
     fileSize : document.getElementById('file').files[0].size 
    }; 
    console.log(data); 
    $.ajax({ 
     type: 'POST', 
     url: '/post_asset/', 
     data: data, 
     dataType: 'json', 
     success: function (result) { 
      console.log(result); 
     }, 
     error: function (error) { 
      console.log(error); 
     } 
    }); 
});

當我運行的點擊功能的內容（後第一個輸入查詢的文件） - 它返回我的預期反應是這樣的：

Object {success: true, upload_url: "http://my_url", id: 12, mime_type: "audio/mp3", size: "52981888"}

然而，當我使用按鈕運行這段代碼，我得到一個錯誤與空錯誤響應文本如下：

Object {readyState: 0, responseText: "", status: 0, statusText: "error"}

任何想法我做錯了什麼？

來源

2016-10-18 Steve Walsh

也許你必須以json格式發送數據。請嘗試使用：data：JSON.stringify（data）。 –

我試過了@AlexandruMihai - 沒有快樂 –

嘗試向click處理程序添加return false，或者將href屬性更新爲＃而不是'/ upload' –

儘量避免你的鏈接a的默認行爲使用e.preventDefault()（重定向到/upload）：

$("#beginUpload").click(function (e) { 
    e.preventDefault(); 

    //...Your code here 
}

希望這有助於。

來源

2016-10-18 22:01:36

當您單擊超鏈接，您需要通過使用類似的發佈，以防止：

$("#beginUpload").click(function (e) { 
      e.preventDefault(); 
      var data = { 
       mimeType : document.getElementById('file').files[0].type, 
       fileSize : document.getElementById('file').files[0].size 
      }; 
      console.log(data); 
      $.ajax({ 
       type: 'POST', 
       url: '/post_asset/', 
       data: data, 
       dataType: 'json', 
       success: function (result) { 
        console.log(result); 
       }, 
       error: function (error) { 
        console.log(error); 
       } 
      }); 
     });

，或者您需要從onclick處理程序返回false。

來源

2016-10-18 22:02:36

jQuery ajax後在控制檯上工作，但不是從頁面上

回答

相關問題