Jquery 单击链接即可在HTML页面上显示HTML文件的内容_Jquery_Html_Datagrid

Jquery 单击链接即可在HTML页面上显示HTML文件的内容

jquery html

Jquery 单击链接即可在HTML页面上显示HTML文件的内容,jquery,html,datagrid,Jquery,Html,Datagrid,我的本地目录C:*中有一个HTML文件，我想在我的HTML页面上提供一个名为**status的链接，单击该链接可在HTML页面上显示HTML文件（具有数据网格表）的内容谁能建议我怎样才能做到这一点 p.S:下面是包含datagrid的HTML文件的代码，我想在单击名为Status的链接后将其显示在普通HTML页面上 <html> <head> <meta http-equiv="Content-Type" content="text/html; chars

我的本地目录C:*中有一个HTML文件，我想在我的HTML页面上提供一个名为**status的链接，单击该链接可在HTML页面上显示HTML文件（具有数据网格表）的内容

谁能建议我怎样才能做到这一点

p.S:下面是包含datagrid的HTML文件的代码，我想在单击名为Status的链接后将其显示在普通HTML页面上

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Server status</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="tt" class="easyui-datagrid" style="width:380px;height:auto;">
        <thead>
            <tr>
                <th field="name1" width="80">Status</th>                
            </tr>                          
        </thead>                           
        <tbody>                            
            <tr>                           
                <td>Australia</td>                      
            </tr>                          
            <tr>                           
                <td>Canada</td>                        
            </tr>                          
            <tr>                           
                   <td>USA</td>                                     
            </tr>                          
            <tr>                           
                <td>UK</td>                       
            </tr>                          
        </tbody>                           
    </table>        
</body>
</html>


服务器状态
地位
澳大利亚
加拿大
美国
英国

问题代码

<html>
 <script type="text/javascript" src="jquery-1.2.6.js"></script>
   <script type="text/javascript"> 
 $(document).ready(function() {

   $('.click').on("click", function(e){
        e.preventDefault(); // cancel the default a tag event.

        $.get( "datagrid.html", function( data ) {
          $(".result").html( data );
        });

   });
 });
</script>
<body style="background-color:gray;">
<div id="wrapper">

  <div id="tabContainer">
    <div id="tabs">
      <ul>
        <li id="tabHeader_1">Status</li>
      </ul>
    </div>
    <div id="tabscontent">
      <div class="tabpage" id="tabpage_1">
      <marquee behavior="scroll" bgcolor="yellow" loop="-1" width="35%"><i><font color="Red"><strong>One server is down...</strong></font></i></marquee>   
     <a href="http://localhost:8080/monitor/datagrid.html" class="click"><font color="Black">click me</font></a>
<div class="result"></div>
</body>
</html>


$（文档）.ready（函数（）{
$（'.click'）。打开（“click”，函数（e）{
e、 preventDefault（）；//取消标记事件的默认设置。
$.get（“datagrid.html”，函数（数据）{
$（“.result”）.html（数据）；
});
});
});

状态

一台服务器停机…

类似这样的内容：

HTML:

jQuery

<script>
 $(document).ready(function() {

   $('.click').on("click", function(e){
        e.preventDefault(); // cancel the default a tag event.

        $.get( "my-file.html", function( data ) {
          $(".result").html( data );
        });

   });
 });
</script>


$（文档）.ready（函数（）{
$（'.click'）。打开（“click”，函数（e）{
e、 preventDefault（）；//取消标记事件的默认设置。
$.get（“my file.html”，函数（数据）{
$（“.result”）.html（数据）；
});
});
});

解释：

我们有一个链接，它绑定了一个click事件，然后单击，我们将向

.html

文件发出一个Ajax请求，然后我们将

数据

附加到

结果

div

注意：要使其正常工作，您需要通过web服务器（如WAMP）运行，而不是通过

文件：//

协议。

您可以使用jQuery的

get（）

方法，然后将HTML附加到页面中。我对jQuery概念完全陌生，您能为我的上述代码提供一些示例或示例代码吗？我尝试在链接中使用过“课堂”点击“>但它对我不起作用。我在apache tomcat app server中托管html文件datagrid是否有问题？@ScriptLearner你能用你正在使用的最新代码更新你的帖子吗？谢谢。我已经添加了代码部分，我正在使用建议的脚本：我原始帖子中的问题代码线程你正在使用的jQuery版本是在2008年发布的，您可能需要尝试最新版本；-）

<script>
 $(document).ready(function() {

   $('.click').on("click", function(e){
        e.preventDefault(); // cancel the default a tag event.

        $.get( "my-file.html", function( data ) {
          $(".result").html( data );
        });

   });
 });
</script>