jquery自动完成菜单单击图像以将数据发布到快递服务器

Question

我有一个有效的jquery自动完成菜单。它显示带有作者，标题和书籍图像的书籍列表。我想添加单击书本图像并发布书名以表达app.post来显示书简档页面的功能。

这里是jquery的自动完成代码。我添加了不起作用的选择事件。

<script type="text/javascript">
    $(document).ready(function() {

        $("#findBook").autocomplete({
            source: function (request, response) {

                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "https://www.googleapis.com/books/v1/volumes?q=" + request.term,


                    success: function (data) {

                        var transformed = data.items.map(function (book) {
                            return {
                                title: book.volumeInfo.title,
                                author: book.volumeInfo.author,
                                image: book.volumeInfo.imageLinks.thumbnail
                            };
                        });

                        response(transformed);
                    }


                });


            },


             select: function(event, ui){

               console.log(ui.title);

                var id = ui.item.title;

                $.ajax({
                    url: "/book_profile_b/" + id,
                    type: "POST",
                    dataType: 'html',
                    data: { id: id },
                    success: function(data){
                        alert(data);
                        var win = window.open();
                        win.document.write(data);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {

                        console.log(xhr.responseText+" - "+thrownError)
                        alert("ERROR:" + xhr.responseText+" - "+thrownError);
                    }
                });

            },


        }).autocomplete("instance")._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + "<img src=\"" + item.image + "\" style=\"height: 40%;\" /><br />" + (item.author && item.author.length ? item.author.map(function (x) {
                    return x;
                }).join(" | ") : '') + " - " + item.title + "</a>")
                .appendTo(ul);
        };

    });

在快递方面。这是我正在尝试将书名数据发送到的功能。

   app.post('/book_profile_b/:encoded_id', function(req, response,err){

        var book_title = req.params.encoded_id;


        if(err){

            console.log(err);
        }



          request("https://www.googleapis.com/books/v1/volumes?q=" + book_title,
              function (error, resp, data) {
                  if (error) {

                      console.log(error);

                  }


                  else {
                      var gb_data = JSON.parse(data);
                      console.log(gb_data);

                       const gb_description = gb_data.items[0].volumeInfo.description;
                       const gb_image = gb_data.items[0].volumeInfo.imageLinks.thumbnail;




                      response.render('book_profile', {book_description: gb_description, book_image: gb_image});

                  }




              });
 });

Answer 1

$.post("/book_profile_b/" + id).done(function(data){
                        alert(data);
                        var win = window.open();
                        win.document.write(data);
                    }).
                    error(function (xhr, ajaxOptions, thrownError) {    
                        console.log(xhr.responseText+" - "+thrownError)
                        alert("ERROR:" + xhr.responseText+" - "+thrownError);
                    });

您可以使用上面的代码块进行邮寄吗？我已经删除了dataType并删除了不需要的数据，因为您已经在url中传递了ID。

我建议使用$ .post

如果有错误，也要共享该错误。