无法使用jQuery添加html标签和关联数据

时间:2015-05-04 18:03:25

标签: javascript php jquery html ajax

我一直在短时间内使用jQuery&目前我正在使用一个用户将登录的网站,然后jQuery将从服务器获取数据并将其附加到现有的html代码。我已经在stackoverflow中搜索了很多内容,而我当前的代码实际上是我在这里学到的内容的摘要。我已尝试使用加载功能,但后来我看到它已被弃用。

我的目的是在加载文件后添加数据,或者通过任何方式启用用户查看数据。我还需要添加id,以便以后可以添加某些行为。这两个函数都可以从两个html文件访问(index.html和profile.html> profile.html将在登录后加载)

我的代码如下。

function changePage(mainArray, length)
{
    location.href="temp.html";
    addData(mainArray, length);
}



$(function() {

    function addData(mainArray, length)
    {
        alert("entry 1");
        for(i = 0; i < length; i++)
        {
            var id1 = "h3"+i;
            var id2 = "p"+i;

            var newHeader= $('<h3></h3>'); //create a new h3
            $(newHeader).attr('id', id1); //set the id attribute of newHeader
            $(newHeader.html(mainArray["title"][i])); //set the innerHtml of the header
            var newPara = $('<p></p>'); //create a new p
            $(newPara).attr('id', id2); //set p id attribute
            $(newPara).html(mainArray["desc"][i]); //add descr
            $('#div1').append(newHeader);
            $('#div1').append(newPara); //add them to dom.
        }
        $("h3").text("View Summary");
        console.log("does it work?");
    }
});

1 个答案:

答案 0 :(得分:1)

您的问题可能更具描述性,但我的理解是您使用jquery执行异步请求,然后将一些元素附加到包含响应的某些部分的DOM。您在文件加载后引用&#39;添加数据&#39;,这可能意味着您需要将代码放在jquery的基本文档就绪函数中:

$( document ).ready(function() {
  //your code here
});

- 短版本

$(function() {
    //your code here
});

现在,问题的关键在于我们获取数据后添加元素。尝试更接近这一点:

function addData(mainArray, length)
{
    for(i = 0; i < length; i++)
    {
    var id1 = "h3"+i;
    var id2 = "p"+i;

    var newHeader= $('<h3></h3>'); //create a new h3
    $(newHeader).attr('id', id1); //set the id attribute of newHeader
    $(newHeader.html(mainArray["title"][i]); //set the innerHtml of the header
     var newPara = $('<p></p>'); //create a new p
     $(newPara).attr('id', id2); //set p id attribute
     $(newPara).html(mainArray["desc"][i]); //add descr
     $('#div1').append(newHeader);$('#div1').append(newPara); //add them to dom.

    }
    $("h3").text("View Summary");
    console.log("does it work?");
}