Question

我有41个JSON对象，每个对象都有相同的方案。

这些对象相当大，因此我想从<option>菜单中<select> id选择一个myPicker来有条件地将对象加载到JavaScript脚本中1}}。

到目前为止，我已经设置了jQuery来处理<select>：

的更改

$('#myPicker').change(function() {
    alert('Value change to ' + $(this).attr('value'));
    $('#container').empty();
    init();
});

函数init()在名为div的{{1}}中绘制内容。

当我更改container时，我希望myPicker的行为类似于init()，这反过来告诉init(value)从文件中加载41个JSON对象中的一个（基于init）。

在这种情况下，是否可以从文件（位于服务器端）加载一大块JSON，或者我是否需要使用服务器端脚本来处理Ajax表单提交和响应等？

修改

我写了以下代码：

value

线<script language="javascript" type="text/javascript"> $(document).ready(function(){ $('#cellTypePicker').change(function() { alert('Value change to ' + $(this).attr('value')); $('#container').empty(); initFromPicker($(this).attr('value')); }); }); function initFromPicker(name) { // pick default cell type from picker, if name is undefined if (typeof name === "undefined") name = 'AG10803-DS12374'; var jsonUrl = "file://foo/bar/results/json/" + name + ".json"; alert(jsonUrl); $.ajax({ url: jsonUrl, dataType: 'json', success: function(response){ alert("Success!"); }, error: function(xhr, textStatus, errorThrown){ alert("Error: " + textStatus + " | " + errorThrown + " | " + xhr); } }); init(); // refills container... } </script> <body onload="initFromPicker();"> ...永远不会被调用。

相反，我收到以下错误：

alert("Success!");

我正在检查值Error: error | Error: NETWORK_ERR: XMLHttpRequest Exception 101 | [object Object]，它似乎是一个正确的网址。它指向的文件存在，我有权访问它（它位于我的主文件夹中）。还有什么东西我还在遗失吗？

Answer 1

让我确保理解你的问题。我想你想：

有一些包含JSON对象的文件
取决于选择了哪个选项加载了特定文件
该文件的内容是JSON和
您希望以后能够在其他javascript中使用JSON对象

如果是这种情况，那么您只需要执行以下操作：

$('#myPicker').change(function() {
    $('#container').empty();
    init($(this).val());
});

function init(jsonUrl){
  $.ajax({
    url:      jsonUrl
    dataType: 'json'
    success: function(response){
      // response should be automagically parsed into a JSON object
      // now you can just access the properties using dot notation:
        $('#container').html('<h1>' + response.property + '</h1>');
    }
  });
}

编辑：例外101表示the requester has asked the server to switch protocols and the server is acknowledging that it will do so [1]。我认为，因为您使用file://foo/bar/...，您可能需要切换isLocal函数[2]的$.ajax标记，但老实说，我不确定。

[1] http://en.wikipedia.org/wiki/Http_status_codes#1xx_Informational [2] http://api.jquery.com/jQuery.ajax/

下面是一个完整的工作示例，它从Twitter中提取JSON对象，因此您应该能够将整个事物复制/粘贴到文件中并在浏览器中运行并让它工作。如果您的服务器配置正确并且您的.json文件位于document_root并具有相应的权限，那么您应该可以将它们换成Twitter URL并使其以相同的方式工作...

<!doctype html>
<html>
    <head>
        <title>My Super Rad Answer</title>
    </head>

    <body>
        <form id="my-form">
            <select id="cellTypePicker">
                <option value=''>No Value</option>
                <option value="AG10803-DS12374">AG10803-DS12374</option>
            </select>
        </form>
    </body>

    <!-- Grab the latest verson of jQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">

         // Wait until the page is fully loaded
         $(document).ready(function(){
            $('#cellTypePicker').change(function() {

                // Grab the value of the select field
                var name = $(this).val();


                if (!name) {
                  // Make sure it's not null...
                  // This is preferred over using === because if name is 
                  // anything but null, it will return fale
                  name = 'AG10803-DS12374';
                }

                // Right now I'm overwriting this to a resource that I KNOW 
                // will always work, unless Twitter is down.
                //
                // Make sure your files are in the right places with the 
                // right permissions...
                var jsonUrl = "http://api.twitter.com/help/test";

                $.ajax({
                    url: jsonUrl,
                    dataType: 'json',
                    success: function(response){
                        // JSON.stringify takes a JSON object and 
                        // turns it into a string
                        //
                        // This is super helpful for debugging
                        alert(JSON.stringify( response ));
                    },
                    error: function(xhr, textStatus, errorThrown){
                        alert("Error: " + textStatus + " | " + errorThrown + " | " + xhr);
                    }
                });
            });
         });
    </script>
</html>

Answer 2

您可以使用$.ajax() - 或其中一个快捷方式，例如$.getJSON()：

$.getJSON('somefile', function(data) {
    // here, data is javascript object represented by the json in somefile
});

在没有服务器端脚本的情况下将JSON加载到本地JavaScript变量中？

2 个答案: