Блог

Главная - Вопросы по программированию - Сообщение jQuery ajax работает на консоли, но не со страницы

Сообщение jQuery ajax работает на консоли, но не со страницы

#jquery #ajax #onclick

#jquery #ajax #onclick

Вопрос:

Я не могу найти ответ из любого поиска, который я сделал.

У меня есть простая кнопка, использующая тег привязки в HTML: 

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

Данные генерируются из элемента ввода в HTML с идентификатором ‘file’.

Мой метод 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);
        }
    });
});

Когда я запускаю содержимое функции click (после первого ввода файла), она возвращает мой ожидаемый ответ, который выглядит примерно так:

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

Однако, когда я запускаю этот код с помощью кнопки, я получаю сообщение об ошибке с пустым текстом ErrorResponse следующим образом:

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

Есть идеи, что я делаю не так?

Комментарии:

1. Возможно, вам необходимо отправить данные в формате json. Пожалуйста, попробуйте использовать это: data: JSON.stringify (данные).

2. Я пробовал это @AlexandruMihai — никакой радости

3. попробуйте добавить значение return false в обработчик кликов или обновите атрибут href на # вместо ‘/upload’

4. Спасибо всем вам за ответы.

Ответ №1:

Попробуйте предотвратить поведение вашей ссылки по умолчанию a (перенаправление на /upload ) с помощью e.preventDefault() :

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

    //...Your code here
}

Надеюсь, это поможет.

Ответ №2:

Когда вы нажимаете на гиперссылку, вам нужно запретить публикацию, используя что-то вроде:

 $("#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);
                }
            });
        });

Или вам нужно вернуть false из обработчика onclick.