如何使用 JQUERY/AJAX 显示包含图片和文本数据的多个数据，这些数据作为对象或数组发送？

Question

I can't find a solution how to handle an object or an array sent from a server and containing binary picture and text data with JQUERY/AJAX我找不到如何使用 JQUERY/AJAX 处理从服务器发送并包含二进制图片和文本数据的对象或数组的解决方案

Ok, here is the server side:好的，这里是服务器端：

const url= require('url'),
      express = require('express'),
      fs = require ('fs'),
      app = express();
// Create a server

app.listen(8080, function (){
    console.log('Server running at http://127.0.0.1:8080/');
});

app.use (express.static (__dirname +'/public')); // provide public data,here: jQuery


app.get ("/", function (req, res){
    res.sendFile (__dirname +"/ClientServerExchange (2.5).html");
    console.log (__dirname +req.url);
});

app.get ("/image", function (req, res) {
    message = req.query.message;
    console.log (message);
    fs.readFile (message,  
    (err, myImg) => {
        var myData = {myImage: myImg, myText: "this a nice pic"};
//      var myData = [myImg, "this a nice pic"]; // if to be sent as array ...
        return res.send (myData);
    });

})

The client side:客户端：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" >
        <title>Client-Server Exchange</title>
        <script src="JS/jquery-3.5.0.js"></script>
        <style>

        </style>
        <script type='text/javascript'>

            $(document).ready (function (){

                const message = encodeURI("../Workbench/Pics/myPic.jpg");

                $.ajax({
                    url: "/image?message=" +message,
                    dataType: 'json',
                    xhr: function(){// Seems like the only way to get access to the xhr object
                        var xhr = new XMLHttpRequest();
                        xhr.ResponseType = 'blob';
                        return xhr;
                    },
                    success: function(data){
                        console.log ("Request sent");
                        var blobData = new Blob ([data.myImage]);
                        src = URL.createObjectURL(blobData);
                        $("img").attr ("src", src); 
                        $("#addComment").text (data.myText);
                    },
                    timeout: 10000
                });
            });
        </script>
    </head>
    <body>
        <p>show a picture from my little server </p>
        <img src ="">
        <p id="addComment"></p>
    </body>
</html>

The request is sent and I assume the response from the server contains all data.请求被发送，我假设来自服务器的响应包含所有数据。 I can see it from the messages in both consoles.我可以从两个控制台的消息中看到它。 But no picture is shown, only a small symbol instead, which looks like a broken picture.但是没有显示图片，只有一个小符号，看起来像一张破碎的图片。 The requested text appears after this symbol.请求的文本出现在此符号之后。 There is no error message on client and server side.客户端和服务器端没有错误消息。

The only way to receive picture data is as shown in the xhr structure inside the $.ajax function.接收图片数据的唯一方法如$.ajax函数内的xhr 结构所示。 I found the solution here at the stackoverflow platform.我在 stackoverflow 平台上找到了解决方案。 Client script works well, if I send picture data only (of course with slight modifications of the client and server script, but this is not the question here).客户端脚本运行良好，如果我只发送图片数据（当然对客户端和服务器脚本稍作修改，但这不是这里的问题）。

How can I program the client script, that it receives such an object and shall treat the myImage -part as a blob and the myText -part as a text?我如何编写客户端脚本，让它接收这样一个对象，并将myImage -part 视为 blob，将myText -part 视为文本？

Thanks in advance for your help.在此先感谢您的帮助。

Answer 1

Following to Babak's tip of using express.Router() I modified the program in my request a little bit.根据 Babak 使用express.Router()的提示，我在我的请求中稍微修改了程序。

Add to server program添加到服务器程序

const router = express.Router ();

app.use ("/image", router);

Replace there app.get ("/image", function (req, res) { ...});替换那里app.get ("/image", function (req, res) { ...}); with和

router.get ("/", function (req, res) {
    message = req.query.message;
    console.log (message);
    fs.readFile (message,  
    (err, myImage) => {
        return res.send (myImage);
    }); 
});

and add并添加

router.get ("/Title", function (req, res) {
    res.send ("This is a nice pic!");
})

On client side replace $.ajax({ ... });在客户端替换$.ajax({ ... }); with和

                $.ajax({
                    url: "/image?message=" +message,
                    xhr: function(){// Seems like the only way to get access to the xhr object
                        var xhr = new XMLHttpRequest();
                        xhr.responseType = 'blob';
                        return xhr;
                    },
                    success: function(data){
                        console.log ("Request sent");
//                      var blobData = new Blob([data]); // not necessary
//                      var url = window.URL || window.webkitURL;
                        src = URL.createObjectURL(data); // could be blobData, if defined, but works also without this.
                        $("img").attr ("src", src);                 
                    }
                });

and add below this inside $(document).ready (function (){ ... })并在$(document).ready (function (){ ... })

                $.get ("/image/Title", function (data) {
                    $("#addComment").text (data);
                })

Obviously it is not possible to send binary data inside an object or array (I'm not sure, because I think to have read this, but I don't know where ...).显然，不可能在对象或数组中发送二进制数据（我不确定，因为我认为已经阅读了这个，但我不知道在哪里......）。 Anyway, the solution above works.无论如何，上述解决方案有效。

如何使用 JQUERY/AJAX 显示包含图片和文本数据的多个数据，这些数据作为对象或数组发送？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-10-20 19:35:37

如何使用 JQUERY/AJAX 显示包含图片和文本数据的多个数据，这些数据作为对象或数组发送？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-10-20 19:35:37

解决方案1
0 已采纳 2020-10-20 19:35:37