Question

我正在链接到产品展示页面以显示书籍详细信息。不幸的是，该页面只显示我的标题和导航，而没有显示图书详细信息。

我使用 VS Code 并安装了 Live Server 扩展进行测试。我有一个函数可以从 URL 中获取书的 ID，然后将该 ID 传递给应该显示书详细信息的函数。正如您将看到的，我在我的代码中使用了相当多的注释来明确哪些函数应该执行。大部分编码在JS文件中处理。

传递给 PDP 页面的 URL：

http://127.0.0.1:5500/book-pdp.html?bookID=ka2VUBqHiWkC

JS

/* sends the user to the product details page once the title is clicked */
/*ONLY INCLUDED TO SHOW HOW URL IS CREATED*
    /*send user to details page onclick of results (PDP)*/
        function productDisplayPage(bookID) {
            window.location.href = 'book-pdp.html?bookID=' + bookID + '';
        }
    /*end PDP*/
/* End Milestone 2 JS Code */

/* Begin Milestone 2 - Book PDP JS Code */
    /*Get bok id from URL*/
        function getParameterByName(name, url) {
            if (!url)
            url = window.location.href;
            name = name.replace(/[\[\]]/g, '\\$&');
            var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
                    results = regex.exec(url);
            if (!results)
                return null;
            if (!results[2])
                return '';
            return decodeURIComponent(results[2].replace(/\+/g, ' '));
        }
    /* End get book id */

    /* Create product display page (PDP) */
        function displayProductDetails(){
            var queryString = location.search;
            var bookID = getParameterByName('bookID', queryString);
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var gbaObject = JSON.parse(this.responseText);
                    var gbaHtml = '';
                    console.log(gbaObject.items);
                    gbaObject.items.forEach(function (item) {
                        gbaHtml += `<div class="div200 border">
                            <div>
                                <img src="` + item.volumeInfo.imageLinks.thumbnail + `" alt="` + item.volumeInfo.title + `" title="` + item.volumeInfo.title + `" />
                                <div><strong>Title:</strong><a href="` + item.volumeInfo.previewLink + `"> ` + item.volumeInfo.title + `</a></div>
                                <div><strong>Sub Title:</strong> ` + item.volumeInfo.subtitle + `</div>
                                <div><strong>Published Date:</strong> ` + item.volumeInfo.publishedDate + `</div>
                                <div><strong>Publisher:</strong> ` + item.volumeInfo.publisher + `</div>
                                <div><strong>Description</strong>` + item.searchInfo.textSnippet + `</div>
                            </div>
                        </div>`;
                    });

                    //display results in container div container
                    $('#book-display').html(gbaHtml);
                }
                else{
                    $('#book-display').html("Something went wrong");
                }

            xmlhttp.open("GET", "https://www.googleapis.com/books/v1/volumes/" + bookID + "", true);
            xmlhttp.send();
            }
        }
    /* End PDP page */

/* End Milestone 2 - Book PDP JS Code */

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lee Baldwin - Milestone 2</title>
    <!--import external stylesheet-->
    <link href="styles/main.css" rel="stylesheet" />

    <!-- import jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!--import external javascript-->
    <script src="scripts/main.js"></script>

  </head>


<body onload="displayProductDetails()">
    <div class="header">
        <h1>Lee Baldwin</h1>
        <h3>Kennesaw State University Student</h3>
      </div>
      <div>
        <ul>
        <li><a href="https://www.leebaldwin.website/Milestone1/leebaldwin_milestone1a.html">Milestone 1a</a></li>
        <li><a href="https://www.leebaldwin.website/Milestone1/leebaldwin_milestone1b.html">Milestone 1b</a></li>
        <li><a href="leebaldwin_milestone2.html">Milestone 2</a></li>
        <li><a href="#">Milestone 3</a></li>
        <li><a href="#">Milestone 4</a></li>
        </ul>
      </div>

      <div class="grid-container" id="book-display">
    
    
      </div>
</body>
</html>

Answer 1

您需要将 Move xmlhttp.open 移动到顶部并使用 0 或 200 验证 xmlhttp.status。

import asyncHandler from './async_handler'

interface Success {
  payload: string
}

interface MyError {
  payload: undefined
  error?: true
}

const fetchData = async (): Promise<Success | MyError> => {
  const [response, error] = await asyncHandler<string>(
    new Promise((resolve) => {
      setTimeout(() => resolve('potato'), 200)
    })
  )

  if (error) return { payload: undefined, error: true }

  return { payload: response } // Type 'string | null' is not assignable to type 'string | undefined'. Type 'null' is not assignable to type 'string | undefined'.ts(2322)
}

export default fetchData

jQuery 产品显示页面不显示详细信息

1 个答案: