使用jsp中的ajax刷新一行刷新按钮的列

时间:2013-09-24 13:45:56

标签: javascript ajax jpa

我在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>

任何人都可以为此提供帮助 提前谢谢

3 个答案:

答案 0 :(得分:1)

这是另一个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>

<强> testMe.txt

'{ "name": "John", "place" : "Chicago" }' 

答案 1 :(得分:0)

答案 2 :(得分:0)

了解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>

在某处保存somePath / testMe.txt并在其中输入一些数据。