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 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析 这里面牵扯到两 ...
随机推荐
- 一维数组的 K-Means 聚类算法理解
刚看了这个算法,理解如下,放在这里,备忘,如有错误的地方,请指出,谢谢 需要做聚类的数组我们称之为[源数组]需要一个分组个数K变量来标记需要分多少个组,这个数组我们称之为[聚类中心数组]及一个缓存临时 ...
- C#编译器闭包机制
背景 C# 在编译器层面为我们提供了闭包机制(Java7 和 Go 也是这种思路),本文简单的做个解释. 背景知识 你必须了解:引用类型.值类型.引用.对象.值类型的值(简称值). 关于引用.对象和值 ...
- VMware NAT方式 CentOS 6.8配置静态IP
一.打开虚拟机设置,配置网络连接,如下图 二.编辑 /etc/sysconfig/network,以配置网关 vim /etc/sysconfig/network NETWORKING=yes HOS ...
- 企业架构研究总结（43）——企业架构与建模之ArchiMate详述（下）
2.7 关系模型元素 企业架构模型包括了各种概念元素以及他们之间的关系,这其中的概念元素已经在前面几节中进行了阐述,而这些概念元素之间的关系则是本节的叙述重点.虽然ArchiMate中具有种类繁多的概 ...
- Introsort(内观排序)
.NET 4.5 这个版本的Array.Sort更改了STL的内观排序算法,那相对于快速排序内观排序到底有什么优化过的呢? 根据维基百科所说,这个排序算法首先从快速排序开始,当递归深度超过一定深度(深 ...
- 使用STL处理分支限界法处理最优装载问题
使用STL处理分支限界法处理最优装载问题 #include <iostream>#include <vector>#include <queue>#include ...
- Visual Stuido 2010/2012 扩展：Quick Launcher，快速打开指定文件
Visual Stuido 2010/2012 扩展:Quick Launcher,快速打开指定文件 Quick Launcher 是一个极其简单但实用的 Visual Studio 扩展,支持 Vi ...
- Mathematics for Computer Graphics
Mathematics for Computer Graphics 最近严重感觉到数学知识的不足! http://bbs.gameres.com/showthread.asp?threadid=105 ...
- 利用微信公众平台实现自动回复消息—java版
最近公司需要拿微信公众平台做个东西,所以就开始了最基本学习,网上很多是php版的,对于我这个只会java,不会php的就只能在网上找点只言片语来一点一点学习了.不费话了直接贴图看效果(很简单的). 不 ...
- 图的匹配问题与最大流问题（三）——最大流问题Ford-Fulkerson方法Java实现
上篇文章主要介绍了Ford-Fulkerson方法的理论基础,本篇给出一种Java的实现. 先借助伪代码熟悉下流程 FORD-FULKERSON(G,t,s) 1 for each edge(u,v) ...