Я ищу, чтобы создать приложение, которое ищет человека по имени - я достиг этой части - и отображает имя человека. Вторая часть приложения также должна содержать более подробную информацию для каждого человека по клику (эта информация должна быть получена из второго 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();
}
Я ищу, чтобы создать приложение, которое ищет человека по имени - я достиг этой части - и отображает имя человека. Вторая часть приложения также должна содержать более подробную информацию для каждого человека по клику (эта информация должна быть получена из второго 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();
}
01JavaScript, петли, URL, дом,