新手求助~~关于js局部刷新的问题

直接上图

如上面所示，我先简单说明一下这个图的意思吧，我设置了两个按钮，一个红色，一个绿色，分别控制着数据库中不同行的信息，这两个按钮获取的数据我都让他在下方表格的同一个地方显示，也就是说点击第一个红色按钮在下面的表格显示数据库第一行的4个数据，点击第二个按钮显示数据库第二行的4个数据，现在我数据库的信息已经获取到了，分别点击两个按钮也都能显示对应的数据。现在的问题是，当我点击第一个按钮时，下面的表格显示的是数据库第一行的数据，而且能自动定时更新显示的数据，当我点击第二个按钮的时候，下面的表格则显示数据库的第二行的信息，同样具有自动定时更新显示的数据，我之前用的是window.setInterval(f1,10000);来更新，但是发现红色跟绿色数据交替更新，而我想做的选中那个按钮就只更新这个按钮下对应的信心，跪求大神指导怎么实现
我的部分代码如下
function funlt1()
{
     function f1()
{
$.post("SQL1.php",'',function(data){var a1=document.getElementById("BH");
data = data.split(';');
     bh.value=data[0];
     temper.value=data[1];
     yw.value=data[2];
     xf.value=data[3];} );
}
window.setInterval(f1,10000);
  }

function funlt2()
{
     function f2()
{
$.post("SQL1.php",'',function(data){var a1=document.getElementById("BH");
data = data.split(';');
     bh.value=data[4];
     temper.value=data[5];
     yw.value=data[6];
     xf.value=data[7];} );
}
window.setInterval(f2,10000);
  }

6 个解决方案

#1

我说的比较啰嗦，希望能把问题描述清楚，大家不要介意哈，各位大神帮帮忙，谢谢啦！

#2

做成一个tab菜单的效果，然后根据:

<div class="sub" data-male="male">sub111</div>

data-male参数来获取后台的数据，提交的是同一个url，只是参数不一样。看看这个思路行不行：



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>test</title>

    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>

    <style type="text/css">

        .none{ display:none;}

    </style>

</head>

<body>

<input id="btn1" class="btn" type="submit" value="男"/> <input id="btn2" class="btn" type="submit" value="女"/>

<div class="content">

    <div class="sub" data-male="male">sub111</div>

    <div class="sub none" data-male="female">sub222</div>

</div>

<div id="test"></div>

<script type="text/javascript">

    var s = '';

    $('.btn').click(function(){

        var idx = $(this).index(),

            sub = $('.content .sub'),

            cur = sub.siblings().hide().eq(idx);

            s = cur.data('male');


        cur.show('fast', function(){

            setInterval(function(){

                console.log('getData111() ' + s);

            }, 1000);

        });

    });

</script>

</body>

</html>

#3

假定2个按钮
a b
全局状态
nowshow = null;

a.click(myshow('A'));
b.click(myshow('B'));

function myshow(s){
    nowshow = s;
    f2();
}

window.setInterval(f2,10000);

function f2(){
   //根据nowshow的值来显示内容
}

#4

- - 你在外面定义一个变量。var type; 当点击绿色按钮。type="green";红色按钮时 type="red"
f1方法中，把type带参过去，获取数据的时候进行type的判断不就行了，麻烦不？

#5

在表格中加个<input type="hidden' id="sel_id" val="">保存点击的那个按钮，然后定时取$("#sel_id").val()
传到后台，后台根据传来的值取数据。

#6

setInterval是可以停止的
比如
var aa=window.setInterval(f2,10000);
上面的会一直运行，要停止就用如下
clearInterval(aa)

#1