Question

我有一些选择菜单，我想用我的PHP脚本中的json填充（每个选择菜单根据其他选择菜单的内容显示不同的值）。我知道如何清除并填充js中的选择菜单，只要我有一个数组可以使用。问题是我不知道如何使用ajax调用来检索javascript的数组或json来填充选择菜单。

我不想使用jquery，因为它对于这样一个简单的任务来说太大了。

我很感激有关此事的任何意见。

我填写菜单的测试脚本：

var sl = document.getElementById(foo);
sl.options.length = 0;
for(var i=0;i<100;i++){
    sl.options[i] = new Option(i + "Option text", i+"optionValue");
}

谢谢。

Answer 1

Zepto是jQuery的轻量级实现，它具有JQ ajax支持，它非常小，可以为您节省大量时间。

Answer 2

如果您可以控制PHP脚本，那么最简单的（本机）方式是使用JSON-P。

在服务器上：

<?php

$callback = $_GET['callback'];
$json = json_encode($data);
print $callback . '(' . $json . ');'; 

?>

并在客户端：

<script>

function getJSON() {
    var script = document.createElement('script');
    script.src = 'http://mysite.com/page.php?callback=updateSelect';
    document.getElementsByTagName('head')[0].appendChild(script);
}

function updateSelect(json) {
    // do stuff with your JSON object
}

getJSON();

</script>

这会向您的远程页面发出基本的GET请求;页面打印包含在您提供的回调名称中的编码JSON，在这种情况下，立即调用updateSelect方法，传入JSON对象。

Answer 3

如果我正确理解你的问题，你正在寻找向服务器发送请求，并以json格式返回一些数据，而不使用jQuery（并且可能 - 不使用任何其他库）。

嗯，非常容易......欢迎来到2000年，在'原型'，'jQuery'和其他库发明之前，以及'Ajax'一词被创造出来之前（虽然范式已经在使用）。 / p>

XmlHttpRequest - 这是一个允许您发送异步http请求并获得响应的对象。最初，此对象的发明者（Microsoft Outlook Web Access）具有XML内容，因此具有名称，但您可以传递任何类型的MIME类型，包括json。此外，最初它仅作为仅在IE中可用的ActiveX实现，但现在它是“窗口”顶级对象的子对象，并且它在所有浏览器上都可用。 jQuery以及基本上所有其他库都使用此对象来支持Ajax功能。请看这里：https：//developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest获取更多详细信息和样本。
XmlHttpRequest将允许您仅向页面来自的同一域发出请求。为了克服这个问题，我们发明了第二种叫做JSON-P的技术，利用了一个事实，你可以拥有一个带有src指向其他域的元素。诀窍是在服务器上生成一个脚本，其中数据作为回调函数的参数。回调函数在您的页面中实现。该函数的名称将是URL的一部分。例如：

<script type="text/javascript" 
    src="http://blogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunc"
    ></script>

查看此网址（它会从Google的博客帖子中返回最近的帖子）。请注意，所有内容都嵌入在函数myFunc的调用中，作为参数传递。

您可以在代码中嵌入<script>元素，也可以使用document.write动态生成它，或者甚至可以使用DOM操作将元素添加到SCRIPT类型的元素中。

使用ajax，json和WITHOUT jquery </select>填充<select>菜单

3 个答案: