Question

很抱歉，如果标题不太清楚，但我认为这是正确的。不管怎么说，我想做的有点像（在某种程度上）使用JQuery（pref），PHP＆amp; CSS。

我真正希望发生的是我网站的“成员”只需在其HTML中粘贴2行代码即可加载小部件。像这样：

<script type="text/javascript" src="http://www.mydomain.com/script.js"></script>

然后显示小部件，如<div id="displaywidget"></div>

确定这个位“很简单”并且没问题。但是如何在script.js

中包含JQuery或“something”来生成小部件

我的意思是“displaywidget” - 小部件div的ID将是我服务器上的php文件的名称，因此基本上script.js需要将displaywidget.php加载到div displaywidget中。

我想我使用document.getElementById('displaywidget')来获取div但是如何在div中“写/插入/加载”displaywidget.php？

思考我写“纯”java可以做“我想要的大部分就是document.getElementById('displaywidget')，但我更愿意”包含“Jquery.js，因为我希望小部件的某些方面使用JQuery 。示例是JQuery UI日期函数。

很抱歉，如果我在漫无边际地思考，那就试着去思考。我的“真实”问题是我对“纯粹的”javascript不太确定，即让div显示/加载displaywidget.php

建议请。（哦，如果我吠叫错误的树，请随时告诉我 - 很好:) :)

提前致谢

Answer 1

我想我使用document.getElementById（'displaywidget'）来获取div，但是如何在div中“写/插入/加载”displaywidget.php？

你正在寻找jQuery中的AJAX行为，它会调用php页面，然后将数据推送到div中。

你应该在这个过程的早期加载jQuery，直接在你的head元素中加载。一旦加载它将被缓存，所以不用担心它在每一页上。没有真正的开销。

安装jQuery后，您可以调用与获取数据和popluation元素相关的许多AJAX函数之一。 Theres $ .load（），$ .ajax（）以及其他一些让我失望的人，除非我去查看他们的文档部分。

你可以在没有jQuery的情况下完成所有这些工作，但是它的代码更多，你必须控制浏览器的差异。

Answer 2

您可以将jquery加载到script.js中，只需将其复制并粘贴到script.js中的任何javascript之前或之后。

所以如果script.js是：

//start of file
alert('ex');
//end of file

成功：

//start of file
alert('ex')
Copy and pasted Jquery source
//end of file

Answer 3

经过一段时间的“拖网和思考”后，我找到了这段代码：

(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
script_tag.onload = scriptLoadHandler;
script_tag.onreadystatechange = function () { // Same thing but for IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main(); 
}
/******** Our main function ********/
function main() { 
jQuery(document).ready(function($) { 
******* Load CSS *******/
var css_link = $("<link>", { 
rel: "stylesheet", 
type: "text/css", 
href: "style.css" 
});
css_link.appendTo('head');          

/******* Load HTML *******/
var jsonp_url = "http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?";
$.getJSON(jsonp_url, function(data) {
$('#example-widget-container').html("This data comes from another server: " + data.html);
});
});
}
})(); // We call our anonymous function immediately

由Alex Marandon撰写并在此发现http://alexmarandon.com/articles/web_widget_jquery/ - 正如我想要的那样，包括/将JQuery安装到.js文件中

在.js页面中包含Jquery脚本

3 个答案: