Javascript 在jsp中使用ajax单击“刷新”按钮时刷新行的列_Javascript_Ajax_Jpa

Javascript 在jsp中使用ajax单击“刷新”按钮时刷新行的列

javascript ajax jpa

Javascript 在jsp中使用ajax单击“刷新”按钮时刷新行的列,javascript,ajax,jpa,Javascript,Ajax,Jpa,您好，我在JSP页面中有一个表，在行级别有刷新按钮，当我单击刷新按钮时，它应该检查数据库并获取这两列并替换旧值，即刷新下面是我的jsp页面 <script src="js/jquery1.min.js"></script> <script <script type="text/javascript"> function refreshRecord(id) { $(document).ready(function(){ $("#buto").cl

您好，我在JSP页面中有一个表，在行级别有刷新按钮，当我单击刷新按钮时，它应该检查数据库并获取这两列并替换旧值，即刷新

下面是我的jsp页面

<script src="js/jquery1.min.js"></script>
<script
<script type="text/javascript">
function refreshRecord(id)
{
  $(document).ready(function(){
  $("#buto").click(function(){
  $(this).parents('tr').find(".b1").load(".b1");
  $(this).parents('tr').find(".b2").load(".b2");
  alert("value");
  });
  });
}
  <table border="1" class="displaytab" id="rtable">
   <tr> 
   <th>#Records</th><th>Status</th><th>Estimated Time</th><th></th>
   </tr>

   <s:iterator value="uploadList" var="m"> 
            <tr>   
            <td class="b1"><s:property value="%{#m.numRecords}" /></td>
            <td class="b2"><s:property value="%{#m.status}" /></td>
            <td>tbd</td>

            <td><s:property value="%{#m.numRecords}" /></td>
            <td><a href=""><img src="images/generate.png" title="Generate Report"</a></td>
            <td><a href=""><img src="images/refresh.png" title="Refresh" id="buto"    onclick="refreshRecord(<s:property value="%{#m.fileId}" />);"></a></td>
            </tr>
         </s:iterator>
         </table>


我认为您需要使用ajax
以下是两个例子：
我认为您需要使用ajax
以下是两个例子：
了解ajax如何在简单的HTML中工作。。。
如果您了解了这一点，就可以很容易地在应用程序中实现相同的功能
将此HTML保存在文件夹[比如ajaxFolder]中。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
        url:"somePath/testMe.txt", //pls specify correct path of text file and enter something in the file.
        success:function(result){$("#div1").html(result);},
        error:function(result){$("#div1").html("It was a fuilure !!!");}
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Click the button. Ajax will take data from the text file and will show you here.</h2></div>
<button>Get External Content</button>

</body>
</html>

<html>
    <head>

    <style>
         button{color:#127DDB;padding:8px 15px;background-color:#C1DFFA;margin-top:20px;}
         #div1{background-color:#F7FBC9;border:1px solid #F8053E}
         #div2{background-color:#FBDCC9;border:1px solid #F8053E}
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>

    <script language="javascript">
    $(document).ready(function(){
       $("button").click(function(){
        $.ajax({
            url:"testMe.txt", //pls specify correct path of text file and enter json string.
            success:waawSuccess,
            error:ohNoFailure
        });
       });

        function waawSuccess(result){
            var obj = jQuery.parseJSON(eval(result));
            $("#div1").html(obj.name);
            $("#div2").html(obj.place);
        }

        function ohNoFailure(result){
            $("#div1").html("It was a fuilure !!!");
        }

    });
    </script>
    </head>
    <body>

    <table border="1">
    <tr>
        <td><div id="div1">old name</div></td>
    </tr>
    <tr>
        <td><div id="div2">old place</div></td>
    </tr>
    <tr>
        <td>House</td>
    </tr>
    <tr>
        <td>School</td>
    </tr>
    </table>

    <button>Run ajax and print here without page refresh!</button>

    </body>
    </html>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.ajax({
url:“somePath/testMe.txt”//请指定文本文件的正确路径并在文件中输入内容。
成功：函数（结果）{$（“#div1”）.html（结果）；}，
错误：函数（结果）{$（“#div1”）.html（“它是一个fuilure！！！”）；}
});
});
});
点击按钮。Ajax将从文本文件中获取数据，并在此处向您展示。
获取外部内容

将somePath/testMe.txt保存在某个地方，并在其中输入一些数据。了解ajax如何在简单的HTML中工作。。。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
        url:"somePath/testMe.txt", //pls specify correct path of text file and enter something in the file.
        success:function(result){$("#div1").html(result);},
        error:function(result){$("#div1").html("It was a fuilure !!!");}
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Click the button. Ajax will take data from the text file and will show you here.</h2></div>
<button>Get External Content</button>

</body>
</html>

<html>
    <head>

    <style>
         button{color:#127DDB;padding:8px 15px;background-color:#C1DFFA;margin-top:20px;}
         #div1{background-color:#F7FBC9;border:1px solid #F8053E}
         #div2{background-color:#FBDCC9;border:1px solid #F8053E}
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>

    <script language="javascript">
    $(document).ready(function(){
       $("button").click(function(){
        $.ajax({
            url:"testMe.txt", //pls specify correct path of text file and enter json string.
            success:waawSuccess,
            error:ohNoFailure
        });
       });

        function waawSuccess(result){
            var obj = jQuery.parseJSON(eval(result));
            $("#div1").html(obj.name);
            $("#div2").html(obj.place);
        }

        function ohNoFailure(result){
            $("#div1").html("It was a fuilure !!!");
        }

    });
    </script>
    </head>
    <body>

    <table border="1">
    <tr>
        <td><div id="div1">old name</div></td>
    </tr>
    <tr>
        <td><div id="div2">old place</div></td>
    </tr>
    <tr>
        <td>House</td>
    </tr>
    <tr>
        <td>School</td>
    </tr>
    </table>

    <button>Run ajax and print here without page refresh!</button>

    </body>
    </html>

如果您了解了这一点，就可以很容易地在应用程序中实现相同的功能
将此HTML保存在文件夹[比如ajaxFolder]中。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
        url:"somePath/testMe.txt", //pls specify correct path of text file and enter something in the file.
        success:function(result){$("#div1").html(result);},
        error:function(result){$("#div1").html("It was a fuilure !!!");}
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Click the button. Ajax will take data from the text file and will show you here.</h2></div>
<button>Get External Content</button>

</body>
</html>

<html>
    <head>

    <style>
         button{color:#127DDB;padding:8px 15px;background-color:#C1DFFA;margin-top:20px;}
         #div1{background-color:#F7FBC9;border:1px solid #F8053E}
         #div2{background-color:#FBDCC9;border:1px solid #F8053E}
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>

    <script language="javascript">
    $(document).ready(function(){
       $("button").click(function(){
        $.ajax({
            url:"testMe.txt", //pls specify correct path of text file and enter json string.
            success:waawSuccess,
            error:ohNoFailure
        });
       });

        function waawSuccess(result){
            var obj = jQuery.parseJSON(eval(result));
            $("#div1").html(obj.name);
            $("#div2").html(obj.place);
        }

        function ohNoFailure(result){
            $("#div1").html("It was a fuilure !!!");
        }

    });
    </script>
    </head>
    <body>

    <table border="1">
    <tr>
        <td><div id="div1">old name</div></td>
    </tr>
    <tr>
        <td><div id="div2">old place</div></td>
    </tr>
    <tr>
        <td>House</td>
    </tr>
    <tr>
        <td>School</td>
    </tr>
    </table>

    <button>Run ajax and print here without page refresh!</button>

    </body>
    </html>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.ajax({
url:“somePath/testMe.txt”//请指定文本文件的正确路径并在文件中输入内容。
成功：函数（结果）{$（“#div1”）.html（结果）；}，
错误：函数（结果）{$（“#div1”）.html（“它是一个fuilure！！！”）；}
});
});
});
点击按钮。Ajax将从文本文件中获取数据，并在此处向您展示。
获取外部内容

将somePath/testMe.txt保存在某个地方，并在其中输入一些数据。这里是另一个HTML，其中包含您想要的内容。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
        url:"somePath/testMe.txt", //pls specify correct path of text file and enter something in the file.
        success:function(result){$("#div1").html(result);},
        error:function(result){$("#div1").html("It was a fuilure !!!");}
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Click the button. Ajax will take data from the text file and will show you here.</h2></div>
<button>Get External Content</button>

</body>
</html>

<html>
    <head>

    <style>
         button{color:#127DDB;padding:8px 15px;background-color:#C1DFFA;margin-top:20px;}
         #div1{background-color:#F7FBC9;border:1px solid #F8053E}
         #div2{background-color:#FBDCC9;border:1px solid #F8053E}
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>

    <script language="javascript">
    $(document).ready(function(){
       $("button").click(function(){
        $.ajax({
            url:"testMe.txt", //pls specify correct path of text file and enter json string.
            success:waawSuccess,
            error:ohNoFailure
        });
       });

        function waawSuccess(result){
            var obj = jQuery.parseJSON(eval(result));
            $("#div1").html(obj.name);
            $("#div2").html(obj.place);
        }

        function ohNoFailure(result){
            $("#div1").html("It was a fuilure !!!");
        }

    });
    </script>
    </head>
    <body>

    <table border="1">
    <tr>
        <td><div id="div1">old name</div></td>
    </tr>
    <tr>
        <td><div id="div2">old place</div></td>
    </tr>
    <tr>
        <td>House</td>
    </tr>
    <tr>
        <td>School</td>
    </tr>
    </table>

    <button>Run ajax and print here without page refresh!</button>

    </body>
    </html>

这是另一个您想要的HTML。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
        url:"somePath/testMe.txt", //pls specify correct path of text file and enter something in the file.
        success:function(result){$("#div1").html(result);},
        error:function(result){$("#div1").html("It was a fuilure !!!");}
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Click the button. Ajax will take data from the text file and will show you here.</h2></div>
<button>Get External Content</button>

</body>
</html>

<html>
    <head>

    <style>
         button{color:#127DDB;padding:8px 15px;background-color:#C1DFFA;margin-top:20px;}
         #div1{background-color:#F7FBC9;border:1px solid #F8053E}
         #div2{background-color:#FBDCC9;border:1px solid #F8053E}
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>

    <script language="javascript">
    $(document).ready(function(){
       $("button").click(function(){
        $.ajax({
            url:"testMe.txt", //pls specify correct path of text file and enter json string.
            success:waawSuccess,
            error:ohNoFailure
        });
       });

        function waawSuccess(result){
            var obj = jQuery.parseJSON(eval(result));
            $("#div1").html(obj.name);
            $("#div2").html(obj.place);
        }

        function ohNoFailure(result){
            $("#div1").html("It was a fuilure !!!");
        }

    });
    </script>
    </head>
    <body>

    <table border="1">
    <tr>
        <td><div id="div1">old name</div></td>
    </tr>
    <tr>
        <td><div id="div2">old place</div></td>
    </tr>
    <tr>
        <td>House</td>
    </tr>
    <tr>
        <td>School</td>
    </tr>
    </table>

    <button>Run ajax and print here without page refresh!</button>

    </body>
    </html>

谢谢，但我使用的是JPA而不是php，您能通过使用这些.Java持久API来帮助我吗？你告诉我了。因此，我猜应用程序的视图是JSP。你真正需要的是；一个javaClass，它可以从DB获取数据，并可以在JsonArray中为您提供输出（如果可能的话）。我没有在JPA工作过。所以我不知道这是否可能。还有一件事。Ajax不是一种语言。简单地说，这就是javascript本身。所以它可以用在HTML、PHP、JSP……或者其他任何东西中。view仅是JSP，带有Struts2Tankyu，但我使用的是JPA，没有PHP，你能通过使用这些来帮助我吗。Java持久API，对吗？你告诉我了。因此，我猜应用程序的视图是JSP。你真正需要的是；一个javaClass，它可以从DB获取数据，并可以在JsonArray中为您提供输出（如果可能的话）。我没有在JPA工作过。所以我不知道这是否可能。还有一件事。Ajax不是一种语言。简单地说，这就是javascript本身。因此，它可以用于HTML、PHP、JSP……或其他任何形式。view仅为JSP，使用struts2ok，我得到了它，但该action类将在两个不同的变量中返回两个值，我必须在同一行的两个不同列中显示如何做到这一点，你能帮我一下吗？这就是为什么我在第一条评论中提到Json。在动作文件中，将这两个变量放入jSon。然后将其发送到JSP。通过ajax实现。提取json（类似于键值对）。将第一个键的值放入第一行。第二行中的第二个。使用java对json进行编码，使用ajax进行解码，如中所示，您可以尝试使用上述示例（HTML）中的jQuery解析json。创建一个jSon字符串并将其放入文本文件中。并尝试用ajax解析它。。快乐编码…）好的，我知道了，但是action类将在两个不同的变量中返回两个值，我必须在同一行的两个不同的列中显示我如何做到这一点，你能帮我一下吗？这就是为什么我在第一条评论中提到了Json。在动作文件中，将这两个变量放入jSon。然后将其发送到JSP。通过ajax实现。提取json（类似于键值对）。将第一个键的值放入第一行。第二行中的第二个。使用java对json进行编码，使用ajax进行解码，如中所示，您可以尝试使用上述示例（HTML）中的jQuery解析json。创建一个jSon字符串并将其放入文本文件中。并尝试用ajax解析它。。快乐编码…）非常感谢，但是如果我没有使用文本文件，我想直接使用action类的数据，实际上我没有使用任何文本文件。在action类中，我有两个变量和数据。非常感谢，但是如果我没有使用文本文件，我想直接使用action类的数据，实际上我没有使用任何文本文件。在action类中，我有两个变量和数据。