Question

我正在寻找一个按名称搜索人的应用程序-我已经完成了这一部分-并显示人的名字。该应用程序的第二部分还应为每个单击的人提供更多详细信息（应从第二个URL检索此信息。最后，当我单击该人时，该应用程序还应注入一个图像。这项工作。你们可以帮忙解决此问题或发光吗？

我已注释掉我一直在试图做的事情。

https://codepen.io/edmonteiro/pen/qKeMLj

document.getElementById("subBtn").onclick = function(event){
//prevent default submission
event.preventDefault();

//grab the typed value in the text box
var name = document.getElementsByClassName("name")[0].value;

//Alternatively give an "id" attribute to the text box in the HTML
//for example, <input type="text" name="textboxname" class="name">, use:
//var name = document.getElementById("textboxname").value();

let ourRequest = new XMLHttpRequest();

//pass this search value as a parameter in URL to get results from database
ourRequest.open('GET', 'https://izrite.com:5555/leads?page=1&name=' + name, true);

//function to call when the AJAX request is completed
ourRequest.onload = function(){
//if request completed successfully
if(ourRequest.status === 200){
  let ourData = JSON.parse(ourRequest.responseText);

  let list = document.getElementById("list");

  //process only if request returned a valid JSON data
  if(typeof ourData === 'object'){
    //if there are 1 or more results found
    if(ourData.length > 0){
      list.innerHTML = "<p><b>Matched names from database:</b></p>";

      //for each `lead` in the array, print its name
      for(lead of ourData){
        list.innerHTML += "<p>Name: " + lead.name + "</p>";
      /*-----------------------------------------------------------------*/
      /* Second and third part of the test - to be continued. Not finished before the 5hours time frame mentioned on the challenge specs*/
        // if((lead.id).value()==="0009bd06-a9ce-470e-b13a-acd2aaaa42d4"){
        //   let ourRequest2 = new XMLHttpRequest();
        //   ourRequest2.open('GET', 'https://izrite.com:5555/lead/0009bd06-a9ce-470e-b13a-acd2aaaa42d4', true);

        //   let moreDetails = document.getElementById('moreDetails');
        //   let ourData2 = JSON.parse(ourRequest2.responseText);
        //   if(typeof ourData2 === 'object'){
        //     //if there are 1 or more results found
        //     if(ourData2.length > 0){
        //       moreDetails.innerHTML = "<p><b>More details</b></p>";

        //       //for each `lead` in the array, print its name
        //       for(detl of ourData2){
        //         moreDetails.innerHtml += "<p>Name: " + detl.name + "</p><br><p>Make: " + detl.make + "</p><br><p>Model: " + detl.model + "</p><br><p>Derivative: " + detl.derivative + "</p>";

        //         // var myImage = new Image(100, 200);
        //         // myImage.src = 'https://izrite.com:5555/image/71890';
        //         // document.body.appendChild(myImage);
        //       }
        //     }
        //   }
        // }
        // ourRequest2.send();
      /*-----------------------------------------------------------------*/

      };
    }else{
      //no results found for this search query
      list.innerHTML = "<p><b>No match found in database!</b></p>";
    }
  }else{
    //response not in JSON format
    list.innerHTML = "<p><b>Response is not in valid JSON format!</b></p>";
  }
 }
}

 //send the AJAX request
 ourRequest.send();
}

Answer 1

ourData.forEach((element, index) => { document.getElementById("app").innerHTML = `<p>${element.name}</p>`; });回调将当前值作为第一个参数，将索引作为第二个参数。试试：

{{1}}

Answer 2

据我所知，您想在搜索框中输入内容，点击“搜索”，然后通过AJAX从数据库中获取匹配的结果。

以下是有效的JavaScript：（将Javascript删除，然后将其粘贴到CodePen中以使其正常运行。）

document.getElementById("subBtn").onclick = function(event)
{
    //prevent default submission
    event.preventDefault();

    //grab the typed value in the text box
    //getElementsByClassName is used because in your HTML, the text box has no "id" attribute
    var name = document.getElementsByClassName("name")[0].value;

    //if you give an "id" attribute to the text box in your HTML
    //for example, <input type="text" name="textboxname" class="name">, use:
    //var name = document.getElementById("textboxname").value();

    let ourRequest = new XMLHttpRequest();

    //pass this search value as a parameter in URL to get results from database
    ourRequest.open('GET', 'https://izrite.com:5555/leads?page=1&name=' + name, true);

    //function to call when the AJAX request is completed
    ourRequest.onload = function()
    {
        //if request completed successfully
        if(ourRequest.status === 200)
        {
            let ourData = JSON.parse(ourRequest.responseText);

            var list = document.getElementById("list");

            //process only if request returned a valid JSON data
            if(typeof ourData === 'object')
            {
                //if there are 1 or more results found
                if(ourData.length > 0)
                {
                    list.innerHTML = "<p><b>Matched names from database:</b></p>";

                    //for each `lead` in the array, print its name and id
                    for(lead of ourData)
                    {
                        list.innerHTML += "<p>Name: " + lead.name + "<br />Id: " + lead.id + "</p>";
                    }
                }
                else
                {
                    //no results found for this search query
                    list.innerHTML = "<p><b>No match found in database!</b></p>";
                }
            }
            else
            {
                //response not in JSON format
                list.innerHTML = "<p><b>Response is not in valid JSON format!</b></p>";
            }
        }
    }

    //send the AJAX request
    ourRequest.send();
}

Answer 3

尝试一下 ourData.forEach（（element，index）=> { document.getElementById（“ app”）。innerHTML + = <p>${element.name}</p>; }）; innerHTML + =

在每个周期添加到HTML。

javascript遍历数组显示详细信息-遍历第二个URL显示第二个数组的详细信息

3 个答案: