Ajax实现页面动态加载,添加数据
前台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Products.aspx.cs" Inherits="_0726Test.Product.Products" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../js/jquery.js"></script> <script type="text/javascript"> $(function () { //1.加载表格中的信息 loadComments(); //2.给按钮添加单击事件 $('#btnSend').click(function () { var post_data = $('#form1').serializeArray();//获取序列化表单元素 //将请求提交到一般处理程序 $.post("InsertProduct.ashx", post_data, function (_datetext) { if (_datetext == 1) { alert("添加成功"); loadComments(); } }) }) }) //页面加载事件 function loadComments() { $.getJSON('GetAllProduct.ashx?id=' + Math.random(), null, function (_dataJSON) { //获取tbody标签 var tbodyDate = $('#tbodyDate'); tbodyDate.empty(); //遍历JSON元素,添加到到Tbody for (var i = 0; i < _dataJSON.length; i++) { tbodyDate.append ($('<tr><td>' + _dataJSON[i].Id + '</td>' + '<td>' + _dataJSON[i].Name + '</td>'+ '<td>'+_dataJSON[i].Price+'</td>'+ '<td>'+_dataJSON[i].Sales+'</td></tr>')); } }) } </script> </head> <body> <form id="form1" runat="server"> <table border="1" cellspcing="2" cellpadding="1"> <tr> <td> 名称: </td> <td> <input type="text" name="txtPname" /> </td> </tr> <tr> <td> 价格: </td> <td> <input type="text" name="txtPrice" /> </td> </tr> <tr> <td> 数量: </td> <td> <input type="text" name="txtSales" /> </td> </tr> <tr> <td> </td> <td> <input type="button" id="btnSend" value="提交" /> </td> </tr> </table> </form> <p>--------------------商品列表----------------------</p> <table border="1" cellspacing="2" cellpadding="1" > <thead> <tr> <th> ID </th> <th> 名称 </th> <th> 价格 </th> <th> 数量 </th> </tr> </thead> <tbody id ="tbodyDate"> </tbody> </table> </body> </html>
一般处理程序代码:
GetAllProduct.ashx(加载数据到页面)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Data.SqlClient; using System.Web.Script.Serialization; namespace _0726Test.Product { /// <summary> /// GetAllProduct 的摘要说明 /// </summary> public class GetAllProduct : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string str = @"Data Source=QH-20160731XBEK\SQLSERVER2008;Initial Catalog=MvcTest;User ID=sa;Password=1234"; SqlConnection conn = new SqlConnection(str); conn.Open(); string selname = "SELECT * FROM MyProduct"; List<MyProduct> products = new List<MyProduct>(); SqlCommand sc = new SqlCommand(selname, conn); SqlDataReader dr = sc.ExecuteReader(); while (dr.Read()) { MyProduct product = new MyProduct(); product.Id = Convert.ToInt32(dr["Id"]); product.Name = dr["ProductName"].ToString(); product.Price = Convert.ToDouble(dr["Price"]); product.Sales = Convert.ToInt32(dr["Sales"]); products.Add(product); } dr.Close(); //把list集合转为JSON类型 JavaScriptSerializer jss = new JavaScriptSerializer(); string jsondata = jss.Serialize(products); context.Response.Clear(); context.Response.Write(jsondata); context.Response.End(); } public bool IsReusable { get { return false; } } } }
InsertProduct.ashx(添加数据)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Data.SqlClient; namespace _0726Test.Product { /// <summary> /// InsertProduct 的摘要说明 /// </summary> public class InsertProduct : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; MyProduct product = new MyProduct(); product.Name = context.Request.Form["txtPname"]; product.Price = Convert.ToDouble(context.Request.Form["txtPrice"]); product.Sales = Convert.ToInt32(context.Request.Form["txtSales"]); string str = @"Data Source=QH-20160731XBEK\SQLSERVER2008;Initial Catalog=MvcTest;User ID=sa;Password=1234"; SqlConnection conn = new SqlConnection(str); conn.Open(); string insertSQL = "INSERT INTO MyProduct VALUES(@name,@price,@sales)"; SqlCommand sc = new SqlCommand(insertSQL, conn); sc.CommandType = CommandType.Text; SqlParameter p1 = new SqlParameter("@name", product.Name); SqlParameter p2 = new SqlParameter("@price", product.Price); SqlParameter p3 = new SqlParameter("@sales", product.Sales); sc.Parameters.Add(p1); sc.Parameters.Add(p2); sc.Parameters.Add(p3); context.Response.Clear(); int result = sc.ExecuteNonQuery(); ) { context.Response.Write("); } else { context.Response.Write("); } context.Response.End(); conn.Close(); } public bool IsReusable { get { return false; } } } }
Ajax实现页面动态加载,添加数据的更多相关文章
- layui中,同一个页面动态加载table数据表格
效果图: 前端代码: <div class="layui-fluid" id="record-user" hidden="hidden" ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- geotrellis使用(二十三)动态加载时间序列数据
目录 前言 实现方法 总结 一.前言 今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...
- Echarts使用及动态加载图表数据
Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地 ...
- AJAX 动态加载后台数据 绑定select
<select id="select"> <!--下拉框数据动态加载--> </select> js:(使用jquery) $(document ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- Echarts动态加载后台数据
注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后 ...
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...
- 使用 Cesium 动态加载 GeoJSON 数据
前言 需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析 这里面牵扯到两 ...
随机推荐
- vs2013
vs2013使用初体验 刚安装好vs2013 , 初步体验了一把, 下面是我目前感受到的改变(对比vs2012) 1. 任务栏图标变了 (左边vs2013, 右边vs2012) 2. 开始界 ...
- [转]Hooked on DTrace
source link: 1.http://blog.bignerdranch.com/1907-hooked-on-dtrace-part-1/ 2.http://blog.bignerdranch ...
- div光标定位问题总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- DOM处理
DOM处理 这几天整理了一下思路,本来觉得DOM部分会有很多东西,但是忽然发现频繁使用的其实并不太多 class class处理部分主要有四个 hasClass:检查元素是否包含某个class add ...
- revel框架教程之缓存和Job
Go语言实战 - revel框架教程之缓存和Job 所有的网站应该都会有一个非常简单的需求,首页一秒之内打开. 满足的方式主要有两种: 页面静态化,效果最好,对服务器基本没负担,只要带宽足够就好了 ...
- DateDiff函数
在MySQL中可以使用DATEDIFF()函数计算两个日期之间的天数 语法: datediff(date1,date2) 注:date1和date2需是合法的日期或日期/时间表达式 例1 SELECT ...
- 进程间通讯之mmap文件共享
进程间通讯之mmap文件共享 引文: 个人名言:“同一条河里淹死两次的人,是傻子,淹死三次及三次以上的人是超人”.经历过上次悲催的面试,决定沉下心来,好好的补充一下基础知识点.本文是这一系列第一篇:进 ...
- markdownpad2注册及样式调整
pro版密钥 邮箱: Soar360@live.com key: GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2 ...
- 完整显示当前日期和时间的JS代码(2007年2月25日星期日正午12:42:48)
代码演示效果为“2007年2月25日星期日正午12:42:48”. 使用方法:将下面的JS代码放到你想要显示的页面中(支持HTML页面),然后在你想要显示时间的位置插入下面的代码即可 <div ...
- 还原数据时出现的“FILESTREAM功能被禁用”问题
解决SQLSERVER在还原数据时出现的“FILESTREAM功能被禁用”问题 解决SQLSERVER在还原数据时出现的“FILESTREAM功能被禁用”问题 今天由于测试需要,在网上下载了Adven ...