Ajax加载数据的使用

需求就是不能再进入页面时加载数据,只能在点击其中一个按钮时把数据加载呈现出来。具体效果如最下面的图。

1、前台页面

1 <h1 class="title" id="001" name="001" onclick="GetData(1)">
2     概述 <span class="title_icon"></h1>
3  <div class="mc_list" id="div001" style="display: none">
4
5   </div>

2、ajax代码

 1 GetData(n){
 2    $.ajax({
 3                         type: "get",
 4                         url: "GetDataHander.ashx?para=" + n + "&jbid=" + jbid,
 5                         dataType: "json",
 6                         success: function (data) {
 7                             $.each(data, function (idx, item) {
 8                                 $("#div00" + n).empty();
 9                                 $("#div00" + n).append("<span style=‘font-family:黑体;font-size:14pt;‘>" + item.DisArticleInfo_Title + "</span></br>" + item.DisArticleInfo_Info + "<br/>");
10                             });
11                         }
12                     });
13 }

3、ashx页面

 1  public void ProcessRequest(HttpContext context)
 2         {
 3             context.Response.ContentType = "text/plain";
 4             string para = context.Request["para"].ToString();
 5             DataTable dt = new DataTable();
 6             DataTable dt1 = new DataTable();
 7             DataTable dt2 = new DataTable();
 8             DataTable dt3 = new DataTable();
 9             DataTable dt4 = new DataTable();
10             string str = string.Empty;
11             if (para == "1")
12             {
13                 dt = disbll.GetList(1, " DisArticleInfo_DiseaseId=" + context.Request["jbid"] + " and (DisArticleInfo_ArticleTypeId=24 or DisArticleInfo_ArticleTypeId=1)", " DisArticleInfo_ID desc").Tables[0];
14             }
15             if (para == "2")
16             {
17                 dt = disbll.GetList(1, " DisArticleInfo_DiseaseId=" + context.Request["jbid"] + " and DisArticleInfo_ArticleTypeId=16", " DisArticleInfo_ID desc").Tables[0];
18             }
19             if (para == "3")
20             {
21                 dt = disbll.GetList(1, " DisArticleInfo_DiseaseId=" + context.Request["jbid"] + " and DisArticleInfo_ArticleTypeId=2", " DisArticleInfo_ID desc").Tables[0];
22             }
23             if (para == "4")
24             {
25                 dt = disbll.GetList(1, " DisArticleInfo_DiseaseId=" + context.Request["jbid"] + " and DisArticleInfo_ArticleTypeId=18 ", " DisArticleInfo_ID desc").Tables[0];
26                 dt1 = disbll.GetList(1, " DisArticleInfo_DiseaseId=" + context.Request["jbid"] + " and DisArticleInfo_ArticleTypeId=19 ", " DisArticleInfo_ID desc").Tables[0];
27                 dt2 = disbll.GetList(1, " DisArticleInfo_DiseaseId=" + context.Request["jbid"] + " and DisArticleInfo_ArticleTypeId=21 ", " DisArticleInfo_ID desc").Tables[0];
28                 dt3 = disbll.GetList(1, " DisArticleInfo_DiseaseId=" + context.Request["jbid"] + " and DisArticleInfo_ArticleTypeId=22 ", " DisArticleInfo_ID desc").Tables[0];
29             }
30             if (para == "5")
31             {
32                 dt = disbll.GetList(1, " DisArticleInfo_DiseaseId=" + context.Request["jbid"] + " and DisArticleInfo_ArticleTypeId=8 ", " DisArticleInfo_ID desc").Tables[0];
33                 dt4 = disbll.GetList(1, " DisArticleInfo_DiseaseId=" + context.Request["jbid"] + " and DisArticleInfo_ArticleTypeId=9 ", " DisArticleInfo_ID desc").Tables[0];
34             }
35             if (para == "6")
36             {
37                 dt = disbll.GetList(1, " DisArticleInfo_DiseaseId=" + context.Request["jbid"] + " and DisArticleInfo_ArticleTypeId=4", " DisArticleInfo_ID desc").Tables[0];
38             }
39             if (dt.Rows.Count > 0)
40             {
41                 str =JsonConvert.SerializeObject(dt,new DataTableConverter());
42                 if (dt1.Rows.Count > 0|| dt2.Rows.Count > 0 || dt3.Rows.Count > 0)
43                 {
44                     dt.Merge(dt1);
45                     dt2.Merge(dt3);
46                     dt.Merge(dt2);
47                     str = JsonConvert.SerializeObject(dt, new DataTableConverter());
48                 }
49                 if (dt4.Rows.Count>0)
50                 {
51                     dt.Merge(dt4);
52                     str = JsonConvert.SerializeObject(dt, new DataTableConverter());
53                 }
54             }
55             context.Response.Write(str);
56             context.Response.End();

4、页面效果如图

时间: 2024-08-25 07:48:52

Ajax加载数据的使用的相关文章

滑轮滚动到页面底部ajax加载数据

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧 当然本例子采用的是jquery库,后期会做成原生js.本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height(): 再给windo

ExtJS学习笔记2:响应事件、使用AJAX加载数据

响应事件: 1.设置一个html标记 <div id="my-div">Ext JS 4 Cookbook</div> 2.使用get函数获取此标记对象 var el = Ext.get('my-div'); 3.将响应函数和对象的事件绑定 el.on('click', function(e, target, options){ alert('The Element was clicked!'); alert(this.id); }, this); 4.一次也可

Ajax 加载数据 练习

查询表的显示,查询显示如果不嵌入PHP代码的话,用ajax怎么实现?   <h1>显示数据</h1> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>代号</td> <td>姓名</td> <td>性别</td>

利用Ajax加载数据

<!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> <meta http-equiv="Content-

分页插件,屏幕滚动ajax加载数据渲染页面

<link rel="stylesheet" href="yunsuifang/pc-patients/css/dropload.css" />    <style>       .opacity {            webkit-animation: opacity 0.3s linear;            animation: opacity 0.3s linear;        } @-webkit-keyframes o

select2 ajax加载数据,支持模糊查询(非本地)

$('#select_yx').select2({ placeholder: "----请选择院系----", width: "183px", allowClear: true, language: { noResults: function (params) { return "暂无数据"; } }, minimumResultsForSearch: -1, ajax: { url: apiaddress + '/Institute/GetIn

前台ajax加载数据

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> <script src="~/Scripts/jquerytemplate.js"></script> function sendPostRequest(targetUrl, parameters, successCallback, errorCallback) { $.ajax({ typ

HTML5 实现触摸加载数据

var startX;                     //触摸起始横坐标var startY;                    //触摸起始纵坐标var moveSpave;                //移动的距离var isMoveX = true;          //判断是否为左右移动var isFirst = true;          //是否要判断touchmove方向var beginTime=0; //监听 触摸事件    document.queryS

Ext选项卡tabpanel切换动态加载数据

鸣人不说暗话,来张图: 代码开始:(使用Ext,ajax加载数据,如果你们有好的方法也可以多多交流)var tabxsk = new Object(); //初始化 tabxsk.init = function () { test.pageSize = Math.floor((d_right_height() - 106 - 27) / 23); tabxsk.markpageSize = Math.floor((d_right_height() - 106 - 27) / 23); tabxs