load(url,data,callback)方法从服务器加载数据,并将返回的HTML放入匹配的元素中。
load( url, [data], [callback] ) - 语法
[selector].load( url, [data], [callback] )
这是此方法使用的所有参数的描述-
url - 包含请求发送到的URL的字符串。
data - 此可选参数表示随请求发送的数据映射。
callback - 此可选参数表示如果请求成功将执行的功能
load( url, [data], [callback] ) - 示例
假设无涯教程在result.html文件中包含以下HTML内容-
<h1>THIS IS RESULT...</h1>
以下是一个简单的示例,简单说明了此方法的用法。
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">language</span><span class="pun">=</span><span class="atv">"javascript"</span><span class="tag">></span><span class="pln">
$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
$</span><span class="pun">(</span><span class="str">"#driver"</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">){</span><span class="pln">
$</span><span class="pun">(</span><span class="str">#stage</span><span class="pun">).</span><span class="pln">load</span><span class="pun">(</span><span class="str">result.html</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="tag"></script></span><span class="pln">
</head>
<body>
<p>Click on the button to load result.html file:</p>
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"stage"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">cc0</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
STAGE
</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"driver"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Load Data"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</body>
</html>
这应该产生以下输出-