Почему AJAX показывает мне файл JSON, который я возвратил через функцию просмотра в flask?

Question

Я использую flask в качестве бэкэнда, и у меня есть кнопка, а с использованием AJAX я вызываю функцию просмотра в flask. и я создал файл сына для хранения некоторых данных формы.

, когда я заполняю форму и нажимаю кнопку, вызывается моя функция загрузки, которая создает результаты и переносит их в файл JSON. Я возвращаю этот файл JSON, чтобы динамически отображать его на внешнем интерфейсе. но вместо данных я получаю весь файл JSON.

загружаем просмотр вызовов api / test для генерации сообщений и добавления этих сообщений к данным. json file

I Я использовал ajax и аналогичную функцию в моем другом проекте, но никогда не возникало этой ошибки.

Вот моя форма и ajax код.

    $(document).ready(function () {
            $('#upload').on('click', 'button', function () {
       
            let photos_fd = new FormData()
            var img = document.getElementById('photos').files.length;
            if (img == 0) {
                $('#msg').html('<span style="color:red">Select at least one file</span>');
                return;
            }
            console.log(document.getElementById('photos').files[0])

            for (var x = 0; x < img; x++) {
                photos_fd.append("photos[]", document.getElementById('photos').files[x]);
            }
            
            let formData = new FormData()
                formData.append("email", $('#email').val());
                formData.append("label", $('#label').val());

                console.log("you submit the form", $('#email').val(), $('#label').val() );

                $.ajax({
                    url: " {{url_for('upload')}} ",
                    dataType: 'json',
                    cache: false,
                    async: true,
                    contentType: false,
                    processData: false,
                    data: formData,
                    photos : photos_fd,
                    type: '',
                    success: function(data) {
                        console.log("xxxxxxx");
                        alert(data.keys());
                        // console.log("",response);
                    },
                    error: function(response) {
                        $("#msg").text(response.response); // display error response
                    }
                });
            });
        });    
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contact-clean">
        <form method="post" action="{{ url_for('upload') }}" enctype="multipart/form-data">
            <h2 class="text-center">Upload Image</h2>
            <div class="form-group">
                <input class="form-control is-invalid" type="email"  id='email' name="email" placeholder="Email">
            </div>
            <div class="form-group">
                <input class="form-control" type="text" id="label" name="label" placeholder="Image Name">
            </div>
           
            <div class="form-group">
                <input type="file" id="photos" name="photos[]">
            </div>
            <div class="form-group">
                <button id ="upload" class="btn btn-primary" type="submit">UPLOAD</button>
            </div>
        </form>
    </div>

flask просмотр загрузки

@app.route('/', methods=['POST'])
def upload():
  if 'photos[]' in request.files:
  photos = request.files.getlist('photos[]')
  photo = photos[0]

  label = request.form["label"]
  email = request.form["email"]

  img_formate = "." + str(photo.filename).split(".")[-1] 

  image = label + img_formate
  photo.save(os.path.join(app.config['UPLOAD_FOLDER'], image))

  result = {
     label:
     {
        'image': image,
        'email': email,
        'caption': json.loads(response.text)['message']
     }
  }

  with open('templates/data.json') as f:
     data = json.load(f)

  data.update(result)

  with open('templates/data.json', 'w') as f:
     json.dump(data, f,indent=4)

  if photo.filename != '':
     return data

else: возврат перенаправления (url_for ('index'))

Я получаю JSON файл, как это при нажатии на кнопку. Я ожидаю, что возвращенный объект JSON будет напечатан на экране под формой, но вместо этого возвращенные данные будут напечатаны непосредственно в окне браузера, которое не поддерживает структуру index. html (которая имеет навбары и форма). Мне вернули это ::

{
    "img1": 
    {
    "caption": " a man holding a dog in a white shirt ", 
    "email": "m@gmail.com", 
    "image": "img1.jpg"
    }
}

Answer 1

После анализа вашего кода здесь я обнаружил ошибку: 1. Во второй строке скрипта должен быть #form вместо #Upload 2. Вы не упомянули тип в Ajax Call

Данный код изменен javascript код

$(document).ready(function () {
            $('#form').on('submit', function (e) {
            e.preventDefault();
            let photos_fd = new FormData()
            var img = document.getElementById('photos').files.length;
            if (img == 0) {
                $('#msg').html('<span style="color:red">Select at least one file</span>');
                return;
            }
            console.log(document.getElementById('photos').files[0])

            for (var x = 0; x < img; x++) {
                photos_fd.append("photos[]", document.getElementById('photos').files[x]);
            }
            
            let formData = new FormData()
                formData.append("email", $('#email').val());
                formData.append("label", $('#label').val());

                console.log("you submit the form", $('#email').val(), $('#label').val() );

                $.ajax({
                    url: " {{url_for('upload')}} ",
                    dataType: 'json',
                    cache: false,
                    async: true,
                    contentType: false,
                    processData: false,
                    data: formData,
                    photos : photos_fd,
                    type: 'POST', 
                    success: function(data) {
                        console.log("xxxxxxx");
                        alert(data.keys());
                        // console.log("",response);
                    },
                    error: function(response) {
                        $("#msg").text(response.response); // display error response
                    }
                });
            });
        });