ajax滚动条动态加载,Ajax实现页面动态加载，添加数据

前台代码：

$(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

($('

' + _dataJSON[i].Id + '' +

'

' + _dataJSON[i].Name + ''+

'

'+_dataJSON[i].Price+''+

'

'+_dataJSON[i].Sales+''));

}

})

}

名称：
价格：
数量：

--------------------商品列表----------------------

ID

名称

价格

数量

一般处理程序代码：

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

{

///

/// GetAllProduct 的摘要说明

///

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 products = new List();

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

{

///

/// InsertProduct 的摘要说明

///

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;

}

}

}

}

layui中，同一个页面动态加载table数据表格

效果图: 前端代码:

js:(使用jquery) $(document ...

&lbrack;JS前端开发&rsqb; js&sol;jquery控制页面动态加载数据 滑动滚动条自动加载事件

页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

Echarts动态加载后台数据

注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后 ...

Echarts使用及动态加载图表数据 折线图X轴数据动态加载

Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...

使用 Cesium 动态加载 GeoJSON 数据

前言 需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析 这里面牵扯到两 ...

随机推荐

LLVM 笔记(五)—— LLVM IR

ilocker:关注 Android 安全(新手) QQ: 2597294287 LLVM 的 IR (Intermediate Representation) 是其设计中的最重要的部分.优化器在进行 ...

startsWith

if (!String.prototype.startsWith) { Object.defineProperty(String.prototype, 'startsWith', { enumerab ...

10 harsh truths that will help you grow

10 harsh truths that will help you grow帮你成长的10个残酷事实In the game of life, if it often seems like you’r ...

C&plus;&plus;&OpenCurlyDoubleQuote;窗体”程序设计启蒙

[摘要]本文以C++菜菜鸟(仅仅须要学习了C++数据类型和控制结构就可以)为目标读者,用求解一元二次方程作为实例,展示窗体式程序的开发过程,获得初步体验.写作目的包含:(1)让学生通过模仿,开发出类似 ...

css文本样式及控制文本的大小写

常用文本样式如下:

MySQL打包执行SQL

当一次业务处理计算服务和数据库交互较多时,将可能有大量时间浪费在数据传输上,尤其对于计算服务和数据库跨机房或跨地区部署时,浪费的时间会极其可观.为了减少时间浪费可以使用MySQL提供的SQL打包功能. ...

position三种属性的区别

1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对 ...

FutureTask使用完整演示样例

MainActivity例如以下: package cc.cv; import java.util.concurrent.FutureTask; import android.os.Bundle; i ...

Jenkins &plus;svn &plus;maven &plus;tomcat&plus; ansible 自动化批量部署

Jenkins +svn +maven +tomcat+ ansible 自动化批量部署 一．部署svn yum install subversion 先创建目录 mkdir /home/svn 创建 ...

IOI2002 POJ1054 The Troublesome Frog 讨厌的青蛙 (离散化&plus;剪枝)

Description In Korea, the naughtiness of the cheonggaeguri, a small frog, is legendary. This is a we ...