Как создавать и ссылаться на страницы, динамически основанные на объектах?

Question

Я очень новичок в веб-разработке, поэтому, пожалуйста, со мной. Если мой вопрос не сформулирован оптимально, пожалуйста, исправьте меня, я открыт для всех отзывов.

Я только что понял, как читать объекты из моей базы данных Mongo и отображать их в таблице.

for (i = 0; i<teamlist.count;) { 
    strTeam = strTeam + "<tr><td><a href=''>" + teamlist.teams[i].teamName + "</td></tr>"; 
    i = i+1; 
} 
strTeam = "<table border='1'>" + strTeam + "</table>" 

У меня теперь есть таблица, заполненная интерактивными ссылками всех моих имен команд, хотя ссылки не берут вас нигде.

Какова наилучшая практика определения ссылок, чтобы направить вас на страницу, которая просто отображает имя команды, которая была нажата?

Answer 1

первый: атрибут href элемента 'a' пуст, поэтому, конечно, ссылка не принимает вас нигде.

какой метод вы используете на стороне сервера? вы можете «динамически» создавать страницы, но сначала вам нужно реализовать прототип такой страницы, а затем позволить ему получать данные из ссылки при вызове. данные команды должны храниться где-нибудь (например, база данных) и извлекаться страницей для отображения.

если вы используете PHP, вы можете передать отдельные данные каждой команды с помощью $ _GET так:

<a href="page.php?team=foo">see foo</a> 

затем, на стороне сервера, вы извлекать данные из $ _GET:

$foo = $_GET['team']; // is 'foo' 
//then do something with foo, maybe a db-query, and show data as HTML 

быть внимательно ознакомьтесь с данными, предоставленными пользователем, на вашем серверном приложении!
вы должны как-то проверить эти переменные $ _GET перед их использованием; просто Google для SQL-Injection.

Answer 2

Как видно из следующего кода, это может вызвать боль при создании html с JavaScript. Если он становится намного более сложным, возможно, вы должны использовать Google для шаблона усов.

Я предполагаю, что вы пробовали это в современном браузере, и ваш список команд содержит определенную информацию, пожалуйста, дайте мне знать, если вам нужна дополнительная помощь.

Один совет при попытке кода - использовать console.log. При использовании этого в Chrome или Firefox с плагином firebug вы можете нажать F12, чтобы открыть инструменты разработчика. Он должен открыться на вкладке консоли. Когда вы регистрируете объекты, вы можете щелкнуть по нему в консоли и просмотреть сведения об объекте.

teamlist = {}; 
teamlist.teams=[ 
    {teamName:"team one",teamDetail:"team one details"}, 
    {teamName:"team two",teamDetail:"team two details"} 
]; 
console.log("teamlist is now:",teamlist); 
var myapp = myapp || {};//innit myapp namespace 
myapp.createTable=function(){ 
    var df = document.createDocumentFragment(), 
    table = document.createElement("table"), 
    i = 0,row,cel; 
    while(i<teamlist.teams.length){ 
    cel = this.cel(teamlist.teams[i]); 
    row = this.row(); 
    row.appendChild(cel); 
    table.appendChild(row); 
    i++; 
    } 
    table.onclick=this.toggleDetails; 
    document.body.appendChild(table); 
}; 
myapp.row = function(){ 
    return document.createElement("tr"); 
}; 
myapp.cel = function(paramObj){ 
    var cel = document.createElement("td"),//<=notice the comma, adding 
    //more variables without having to specify "var" 
    detail = document.createElement("div"); 
    detail.appendChild(document.createTextNode(paramObj.teamDetail)); 
    detail.style.display="none"; 
    detail.style.position="relative"; 
    detail.style.top="10px"; 
    detail.style.left="-50px"; 
    detail.style.backgroundColor="#AAAAAA"; 
    cel.appendChild(document.createTextNode(paramObj.teamName)); 
    cel.appendChild(detail); 
    return cel; 
}; 
myapp.toggleDetails = function(e){ 
    if(e.target.tagName!=="TD") 
    return; 
    var details = e.target.getElementsByTagName("div")[0]; 
    var visible = details.style.display; 
    visible = (visible==="inline")?"none":"inline"; 
    details.style.display=visible; 
}; 
myapp.createTable();