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中。
所有回答(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>
$(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"); }); }); });
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; } }
谢谢你的回复，但可能是我没有讲清楚，我在DIVA中的TABLE 的用户ID列有一个超链接。当用户单击这个超链接时调用AJAX 获取当前行的用户ID，然后根据这个用户ID去数据库查询用户表得到用户简介数据（大概150个字符）。然后把查询出来的用户简介数据显示在DIVB中。
@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传递到后台将数据返回-->
@秋壶冰月: 就是不知道怎么用Ajax把那个UserID传到后台，然后把查询出来的数据显示在DIVB上。不好意思。麻烦你了！
@OneStranger:
$.ajax({ url: "Handler1.ashx？Id=" + 11 + "&Name=SayHi", //第一种 通过url传递参数 url地址后跟？Id=11 多个的话，第二个要后跟&Name= data: {Id:10,Name:"SayHi"} //第二种 不通过post提交 最后也是通过url传递的 });
如果不是很了解，jquery的话，通过jquery文档查看一下，还有可以开发工具，查看请求信息
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>
AjaxSupport 是一个后台方法，它可以直接用在页面的Onclick事件吗？
@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
建议问者还是去看有关ajax的书或者视频吧，感觉楼上两位已经说的很明白了，貌似问者都摸不着头脑...
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>
不好意思, 前段时间有点事,没有回复你. 我认为你的方法更好懂. 可不可以再补充一下.假如超连接的不是用户ID 而是用户名. 一般来说不会使用 "用户名"去数据库查数据. 所以这个时候我要通过用户单击用户名连接 获取用户ID .但是这个用户ID 不需要从数据库查. 就从当前html Table中的当前行的"用户ID"列得到. 但是用户ID 一般不会显示给用户.所以必须有一个方法来储存它. 然后单击连接时获取它.应该怎么做.谢谢!
0
说的很清楚了,再不会来找我吧 我在北京 哈哈
0
<a href="javascript:void(0);" onclick='fn("用户ID")' >用户名</a>
0
使用 get 或者 post 方式都可以实现，参数传递也很简单啊，看一下 Jquery 就知道了，自己动手写一个小例子就都明白了。
0
已经解决
