如何通过C＃AJAX将数据返回到javascript变量？

Question

我正在使用jQuery插件jQuizMe进行测验，我想从数据库中获取测验问题。 因此，我认为我可以使用ajax调用来获取问题并对其进行处理以模仿类似JSON的数组。 然后，我想获取该AJAX responseData并将其（作为类似于JSON的数组）存储在javascript变量中。

这是代码：

$(document).ready(function() {
    var quiz = new Array();
    $.get("/base/GameList/GetGameQuestions/StatesAndCapitalsGame.aspx", function(data)  {
        quiz = data;
    });

    var options = {
        intro: "Find out if you know which Capital is for which State.",
        allRandom: true,
        title: "State Capitals Quiz",
        fxType: 1
    };
    var lang = {
        praise: "Great job, right!"
    };

    $("#quizArea").jQuizMe(quiz, options, lang);

});

返回的数据如下所示：

{
    multiList: [
        { ques: "What is the capital of Alabama?",
          ans: "Montgomery",
          ansSel: ["Hamptonville", "Ellenville", "Somerville"]
        },
        { ques: "What is the capital of New Jersey?",
          ans: "Trenton",
          ansSel: ["Hamptonville", "Ellenville", "Somerville"]
        }
    ]
};

我以为这可能无法正常工作，因为它只是将此响应作为字符串分配给quiz变量，但我希望大家都能引导我朝着正确的方向发展。

谢谢！

编辑：我通过使用Groo建议（以修改的形式）解决了这个问题。 谢谢大家的建议！

$(document).ready(function() {
function runQuiz(quiz) {
   var options = {
       quizType: "multiList",
       intro: "Find out if you know which Capital is for which State.",
       allRandom: true,
       title: "State Capitals Quiz",
       fxType: 1
   };
   var lang = {
       praise: "Great job, right!"
   };
    var stuff = new Array();
    stuff = eval('(' + quiz + ')');
   $("#quizArea").jQuizMe(stuff, options, lang);
}

    $.get("/base/GameList/GetGameQuestions/StatesAndCapitalsGame.aspx", function(data)  {
        runQuiz(data);
    });
});

Answer 1

在C＃AJAX回发上，将您的javascript变量设置为<％= myVariable％>-将myVariable替换为您尝试在javascript中设置的任何变量。 只要确保您的JavaScript在UpdatePanel中即可。 在服务器端重写javascript时，您的变量将在呈现页面之前应用于脚本。

Answer 2

您可以为jQuery.ajax调用添加dataFilter和error处理程序，以检查接收到的JSON数据的样子：

var runQuiz = function(quiz) {
   var options = {
       intro: "Find out if you know which Capital is for which State.",
       allRandom: true,
       title: "State Capitals Quiz",
       fxType: 1
   };
   var lang = {
       praise: "Great job, right!"
   };

   $("#quizArea").jQuizMe(quiz, options, lang);
}

$.ajax({
      type: "POST",
      url: "/base/GameList/GetGameQuestions/StatesAndCapitalsGame.aspx",
      data: { },
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      timeout: 15000,
      dataFilter: function(data, type) {
          // alert(data);
          return data;
      },
      error: function(xhr, textStatus, errorThrown) {
          // alert(textStatus + ' ' + errorThrown);
      },
      success: runQuiz
 });

出于调试目的，您可以取消注释dataFilter事件的处理程序，以获取Web服务返回的原始JSON字符串。

Answer 3

您可以使用PageMethods进行Web服务调用并检查答案是否正确。

它们非常容易设置：

使用PageMethods对象并传递参数来调用页面方法的JavaScript语法：

function onYourEvent()
{
     PageMethods.Somemethod(p1,p1,p3,onSucceed,onError); 
}

//CallBack method when the page call succeeds
function onSucceed(results, currentContext, methodName)
{
      alert(results);
}

//CallBack method when the page call fails due to interna, server error
function onError(results, currentContext, methodName)
{
      alert(results);
}

然后，在后面的代码中，您需要创建公共静态方法（Somemethod）并将其设置为[WebMethod]

Answer 4

由于您要返回JSON数据，因此请使用$.getJSON()函数而不是$.get() 。

返回的数据将自动评估为javascript对象而不是字符串。 除此之外，我会说你是对的。