javascript - 使用 Ajax 和 JSON 更改 HTML

Question

因此，我试图从 JSON 文件中随机选择一段文本（由于相同的来源策略问题，它实际上是 JSONP）文件出现在 Web 应用程序中。

我生成一个随机数，如下所示：

function randomNumberCreator(numberOfOptions){
    var randomNumber = Math.floor(Math.random()*numberOfOptions);
    return randomNumber;
};

我的 JSON 代码如下所示（这是一个示例 - 它继续）：

otmjsonp({

    "option2" : "this text",

    "option3" : "that text",

    "option4" : "some other text",

    });

并希望能够做这样的事情：

$(".choice1").html(JSON.option+randomNumberCreator(4)); 

但这似乎不起作用，所以我不得不想出一个精心设计的解决方法（这真的很荒谬，我知道）：

function updateTree(){

$.ajax({

    url:"http://www.WEBSITE.com/json/newotmtree.php",
    type: "GET",
    dataType: "jsonp",
    jsonpCallback: "otmjsonp",
    async: false,   
    success: function(JSON){

    $(".initialChoices a").each(function(){
    $(this).show();
    });

    function rollDice(){
    diceRoll = randomNumberCreator(6);


    switch(diceRoll){
            case 1:
            $(".choice1").html(JSON.option1)
            $(".choice2").html(JSON.option2)
            $(".choice3").html(JSON.option3)
            break;

            case 2:
            $(".choice1").html(JSON.option1)
            $(".choice2").html(JSON.option5)
            $(".choice3").html(JSON.option6)
            break;

            case 3:
            $(".choice1").html(JSON.option1)
            $(".choice2").html(JSON.option8)
            $(".choice3").html(JSON.option9)
            break;

            case 4:
            $(".choice1").html(JSON.option1)
            $(".choice2").html(JSON.option11)
            $(".choice3").html(JSON.option1)
            break;

            case 5:
            $(".choice1").html(JSON.option1)
            $(".choice2").html(JSON.option3)
            $(".choice3").html(JSON.option4)
            break;

            case 6:
            $(".choice1").html(JSON.option1)
            $(".choice2").html(JSON.option4)
            $(".choice3").html(JSON.option9)
            break;

            default:
            alert("switch fail");

    }
    };

    rollDice();


    var option1 = JSON.option1;
    var option2 = JSON.option2;
    var option3 = JSON.option3;
    var option4 = JSON.option4;
    var option5 = JSON.option5;
    var option6 = JSON.option6;
    var option7 = JSON.option7;
    var option8 = JSON.option8;
    var option9 = JSON.option9;
    var option10 = JSON.option10;
    var option11 = JSON.option11;
    },
    error:function(){
    alert("error");
    }

}); };

为了完整起见，这里是 HTML：

<ul class="initialChoices">
<li><p><a class = "choice1" href="#">AJAX FAIL</a></p></li>
<li><p><a class = "choice2" class="button" href="#">AJAX FAIL</a></p></li>                           
<li><p><a class = "choice3" class="button" href="#">AJAX FAIL</a></p></li>                    
</ul>

有没有办法让我的 JSONP 响应真正随机（就像我希望做的那样） - 还是我坚持这个丑陋的解决方案？

谢谢！

Answer 1

正确的方法是

$(".choice1").html(JSON["option"+randomNumberCreator(4)]); 

Answer 2

对于随机值，您会发现使用数组要容易得多。由于您没有使用 JSON 对象中的属性名称，因此您可以仅使用值填充数组。从数组中选择一个随机值很简单a[Math.floor(Math.random() * a.length)]：

$.ajax({

    url:"http://www.WEBSITE.com/json/newotmtree.php",
    type: "GET",
    dataType: "jsonp",
    jsonpCallback: "otmjsonp",
    async: false,
    success: function(JSON){

      var a=[],i;
      for(i in JSON)a.push(JSON[i]);

      $(".initialChoices a").each(function(){
        $(this).html(a[Math.floor(Math.random() * a.length)]);
        $(this).show();
      });

    },
    error:function(){
    alert("error");
    }
});

Answer 3

就像是

$(".choice1").html(JSON["option" + randomNumberCreator(4)]); 

可能有用