Question

我正在使用ajax GET来接收一些html响应体。一旦我得到了响应体，我就解析出了所需的字符串。在我的例子中，所需的字符串是美国流行篮球队的名字。然后我将解析后的字符串存储在名为teamNames的字符串数组中。

因此，如果我打印出字符串数组teamNames，它将打印像=＆gt;这样的名字。热火，猛龙，步行者等。

现在我想使用一些ajax方法为teamNames数组中的所有字符串创建按钮名称。

以下是我的javascript。

  <script>
    $( document ).ready(function()
    {
       $("#log").click(function(){

     $.ajax({
        url: "http://1xx.1xx.0.1xx:8081/script.login",
            type: "GET",
            data: { 'page':'create_user', 'access':'user','username':'user', 'password':'user'},
            dataType: "text",
            success: function (html) {
                //Prints the Response Body
                console.log(html);


          var teamNames = new Array();
          var res = html.match(/insertNewChild(.*);/g);
                for(var i =0;i<res.length;i++)
                {

                    //Parse out names of the desired strings         
                    var temp = res[i].split(',');
                    if(temp.length >= 3)
                    {

               //Store the desired strings in an string array 
              teamNames[i] = (temp[2].replace('");','')).replace('"','');
                    }                   
                }


              for(var i = 0; i<teamNames.length; i++){

                 //this will print names of all the basketball teams (desired string)
                 alert(widgetNames[i]);

                 //create buttons using the printed string


              }

            }

       });
      });


    })

</script>

在我的html代码中，我有一个名为item的div，它位于某个导航菜单中。

  <div id="items">
 <!-- Should be loaded using some ajax method -->
 <a href="" data-theme="b" data-role="button">Raptors</a>
  <a href="" data-theme="b" data-role="button">Heat</a>
 <a href="" data-theme="b" data-role="button">Pacers</a>
<a href="" data-theme="b" data-role="button">Celtics</a>
<a href="" data-theme="b" data-role="button">Bulls</a>
<a href="" data-theme="b" data-role="button">Orlando</a>

 <!-- Should load by default. -->
<a href="#page1" data-transition="fade" data-theme="b" data-icon="flat-cross" data-role="button">LOG OUT</a>
  </div>

我希望能够使用ajax创建动态上面列出的按钮。因此，例如，如果我的teamNames数组包含猛禽队，那么我想在项目div中动态创建以下内容。 ==＆GT;

<a href="" data-theme="b" data-role="button">Raptors</a>

请告知如何做到这一点？如果这是一个糟糕的问题，我再次道歉，因为我是一个js和html noob。我过去曾问过几个问题，得到了很多帮助，让我开始了。任何提示或提示都表示赞赏。

Answer 1

您可以使用以下代码“

for(var i = 0; i<teamNames.length; i++){
   $('#items').prepend('<a href="javascript:;" data-theme="b" data-role="button" >'+teamNames[i]+'</a>');
}

Answer 2

我不会展示如何处理按钮，因为我不确定你要对它们做什么，但我会告诉你如何创建它们。

var buttons = new Array();

for(var i = 0; i < teamNames.length; i++){

    //this will print names of all the basketball teams (desired string)
    alert(widgetNames[i]);

    //create buttons using the printed string
    buttons[i] = $("<a href='#' data-theme='b' data-role='button'>" + widgetNames[i] + "</a>");       

}

这应该为anchor中的每个值填充一个按钮样式widgetNames的数组。

Answer 3

最短路

不需要循环!!

var buttonsHTML='<a href="#" data-theme="b" data-role="button">'+
teamNames.join('</a><a href="#" data-theme="b" data-role="button">')+
'</a>';

或

var 
a='<a href="#" data-theme="b" data-role="button">',
b='</a>',
btns=a+teamNames.join(b+a)+b;

<强>演示

http://jsfiddle.net/7Nu5k/2/

如果您有任何问题，请直接询问！

在jquery中使用ajax来创建按钮

3 个答案: