首页新闻找找看学习计划

Ajax 更新问题

0
悬赏园豆:100 [已关闭问题] 关闭于 2014-09-15 21:18

一个页面中有两个DIV (DIVA 和DIVB)。 DIVA中有一个TABLE。TABLE中显示的是用户列表(用户ID,用户名等8个列)。DIVB中要显示的是用户简介。因为用户简介内容较多,所以单独一个DIV显示。现在想用AJax Or Jquery获取Table中每行的用户ID。然后查询数据库得到用户简介信息,然后把用户简介信息显示在DIVB中。由于我对Ajax or Jquery不熟。还请各位园友不吝赐教. Thanks.

问题补充:

在DIVA中的TABLE 的用户ID列有一个超链接。当用户单击这个超链接时调用AJAX 获取当前行的用户ID,然后根据这个用户ID去数据库查询用户表得到用户简介数据(大概150个字符)。然后把查询出来的用户简介数据显示在DIVB中。

OneStranger的主页 OneStranger | 初学一级 | 园豆:14
提问于:2013-11-27 21:45
< >
分享
所有回答(8)
1
<div id="diva">
       <table >
           <tr><td>姓名</td><td>年龄</td></tr>
           <tr><td>helll word</td><td>for ever</td>
           </tr>
           <tr><td colspan="2"> <span id="getData" style="float:right">>></span></td></tr>
       </table>
   </div>
   <div id="divb" style="display:none;">
     <table id="appendData" style="border:1px solid red">
     <tr style="border:1px solid black"><td>地址</td><td>邮箱</td><td>手机号</td></tr>
     </table>
   </div>
htm

 

  $(function () {
            $("#getData").click(function () {
                $.getJSON("Handler1.ashx", "", function (data) {
                    var tr = "<tr><td>";
                    tr += data.Adress + "</td>"
                    tr += "<td>" + data.Email + "</td>";
                    tr += "<td>" + data.Phone + "</td></tr>";
                    $("#appendData").append(tr);
                    $("#divb").css("display", "block");
                });
            });
        });
js

 

   public class Handler1 : IHttpHandler {

        public void ProcessRequest(HttpContext context) {
            context.Response.ContentType = "text/plain";
            Person p = new Person() { Adress=@"made in china",Email=@"xxx@hotmail.com",Phone="18856787890"};
            JavaScriptSerializer js = new JavaScriptSerializer();
            context.Response.Write(js.Serialize(p));
        }

        public bool IsReusable {
            get {
                return false;
            }
        }
    }

    public class Person {
        public string Adress { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
    }
ashx
秋壶冰月 | 园豆:5450 (大侠五级) | 2013-11-27 22:11

谢谢你的回复,但可能是我没有讲清楚,我在DIVA中的TABLE 的用户ID列有一个超链接。当用户单击这个超链接时调用AJAX 获取当前行的用户ID,然后根据这个用户ID去数据库查询用户表得到用户简介数据(大概150个字符)。然后把查询出来的用户简介数据显示在DIVB中。

支持(0) 反对(0) OneStranger | 园豆:14 (初学一级) | 2013-11-27 22:55

@OneStranger: 那也简单啊!

    <!--第一种用法-->
       <a href="javascript:void(0);" id="link" val="11">Id</a><!-- 不是很标准,通过jquery的attr可以获取到内容 再用ajax传到后台-->
       <!--第二种用法-->
       <a href="javascript:void(0);" class="Link">hh</a> <!--将a标签放到td,通过jquery拿到a标签的父节点的内容 用ajax传递到后台将数据返回-->
支持(0) 反对(0) 秋壶冰月 | 园豆:5450 (大侠五级) | 2013-11-27 23:07

@秋壶冰月: 就是不知道怎么用Ajax把那个UserID传到后台,然后把查询出来的数据显示在DIVB上。不好意思。麻烦你了!

支持(0) 反对(0) OneStranger | 园豆:14 (初学一级) | 2013-11-27 23:16

@OneStranger: 

 $.ajax({
                    url: "Handler1.ashx?Id=" + 11 + "&Name=SayHi",   //第一种 通过url传递参数 url地址后跟?Id=11 多个的话,第二个要后跟&Name=
                    data: {Id:10,Name:"SayHi"}  //第二种 不通过post提交 最后也是通过url传递的
                });

如果不是很了解,jquery的话,通过jquery文档查看一下,还有可以开发工具,查看请求信息

支持(1) 反对(0) 秋壶冰月 | 园豆:5450 (大侠五级) | 2013-11-27 23:29
0
//ajax函数
function loadXMLDoc(k,t)
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //在这里获得DIV的ID,把结果显示的这里
            var obj = document.getElementById("DIV_01");
            obj.textContent = xmlhttp.responseText
        }
    }
    xmlhttp.open("GET", "/Picture/AjaxSupport/?k=" + k.toString()+"&t="+t, true);
    xmlhttp.send();
}
//后台获取参数查询后返回结果
 public void AjaxSupport(int k, int t)//参数根据自己需要设置
        {
           string result=ExcuteSQL();
           System.Web.HttpContext.Current.Response.Write(result);
//这里把查询结果返回
        }

至于你的连接在生成的时候生成参数传递给AJAX函数就是了

<a  onclick="AjaxSupport(1,2)">Id</a>

<a  onclick="AjaxSupport(2,3)">Id</a>

大芝麻 | 园豆:4 (初学一级) | 2013-11-27 23:27

AjaxSupport 是一个后台方法,它可以直接用在页面的Onclick事件吗?

支持(0) 反对(0) OneStranger | 园豆:14 (初学一级) | 2013-11-28 00:11

@OneStranger:不好意思这里我弄反了应该是 <a  onclick="loadXMLDoc(1,2)">Id</a>

loadXMLDoc再把参数通过"/Picture/AjaxSupport/?k=" + k.toString()+"&t="+t,方式传给后台AjaxSupport 。

就像www.XXX.com/?k=1&t=2

支持(0) 反对(0) 大芝麻 | 园豆:4 (初学一级) | 2013-11-28 10:58
0

建议问者还是去看有关ajax的书或者视频吧,感觉楼上两位已经说的很明白了,貌似问者都摸不着头脑...

拾梦小侠ด้้้ | 园豆:748 (小虾三级) | 2013-11-28 14:47
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <script type="text/javascript" src="js/jQuery.js"></script> 
    <script type="text/javascript">
        function GetData(uid)
        {

//后台接收getdata的值执行根据uid获取信息的方法
            $.get('当前页url地址?Action=getdata&uid='+uid,
            function(data)
            {
                //获取返回的data信息显示在B层
                $('#DIVB').html(data);
            }
            );
        }
    
        //获取当前行用户id
        $(document).ready(function(){
            $('table td a').click(function(){
                //获取用户id
                var uid = $(this).text();
                //ajax后台方法获取数据
                GetData(uid);
            });
        });
    </script>
</head>
<body>
<div id="DIVA">
        <table>
          <tr><td><a href="javascript:void(0);">用户ID1</a></td><td>用户名</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
          <tr><td><a href="javascript:void(0);">用户ID2</a></td><td>用户名</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
          <tr><td><a href="javascript:void(0);">用户ID3</a></td><td>用户名</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
          <tr><td><a href="javascript:void(0);">用户ID4</a></td><td>用户名</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
          <tr><td><a href="javascript:void(0);">用户ID5</a></td><td>用户名</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
          <tr><td><a href="javascript:void(0);">用户ID6</a></td><td>用户名</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
          <tr><td><a href="javascript:void(0);">用户ID7</a></td><td>用户名</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
          <tr><td><a href="javascript:void(0);">用户ID8</a></td><td>用户名</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        </table>
     </div>   
     <div id="DIVB">
        用户简介:
     </div>
</body>
</html>
白桦林2017 | 园豆:170 (初学一级) | 2013-11-28 16:18

不好意思, 前段时间有点事,没有回复你. 我认为你的方法更好懂. 可不可以再补充一下.假如超连接的不是用户ID 而是用户名. 一般来说不会使用 "用户名"去数据库查数据. 所以这个时候我要通过用户单击用户名连接 获取用户ID .但是这个用户ID 不需要从数据库查. 就从当前html Table中的当前行的"用户ID"列得到. 但是用户ID 一般不会显示给用户.所以必须有一个方法来储存它. 然后单击连接时获取它.应该怎么做.谢谢!

支持(0) 反对(0) OneStranger | 园豆:14 (初学一级) | 2013-12-05 14:00
0

说的很清楚了,再不会来找我吧 我在北京 哈哈

simadi | 园豆:283 (菜鸟二级) | 2013-11-29 16:30
0

<a href="javascript:void(0);"  onclick='fn("用户ID")' >用户名</a>

卒子 | 园豆:588 (小虾三级) | 2014-01-16 15:08
0

使用 get 或者 post 方式都可以实现,参数传递也很简单啊,看一下 Jquery 就知道了,自己动手写一个小例子就都明白了。

晓菜鸟 | 园豆:2594 (老鸟四级) | 2014-07-15 10:02
0

已经解决

OneStranger | 园豆:14 (初学一级) | 2014-09-15 21:15
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册