62,268
社区成员
发帖
与我相关
我的任务
分享100分求在留言本里用jquery添加三个按钮（已写好查询和显示留言代码）
100分求在留言本里用jquery添加三个按钮（已写好查询和显示留言代码），一个为【回复留言按钮】，一个为【删除留言按钮】，一个为【发表留言按钮】。其中，【发表留言按钮】在查询显示留言下面，【回复留言】与【删除留言】嵌入在显示留言列表里头，一个ID对应一个【回复留言】和一个【删除留言】。
下面是查询和显示留言的代码：
test.aspx
HTML code<%@ Page Language="C#" AutoEventWireup="true" %>
<!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 id="Head1" runat="server">
<title></title>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="result">
</div>
</form>
<script type="text/javascript">
var pageNo = 1; //当前页号
var pageItems = 3; //每页显示的行数，这个数字与da.Fill(ds,pageNo,3,"gbook");里面的3保持一致
var MaxPage = pageItems;
function showPage(m) {
if (m == -1) {
if (pageNo < 2) {
alert("已经到了首页");
return;
};
MaxPage = pageItems;
}
else {
if (MaxPage < pageItems) {
alert("已经到了末页");
return;
};
}
pageNo += m;
getData();
}
$(document).ready(function () {
getData();
});
function getData() {
$.ajax({
type: "POST",
cache: false,
url: "WebService3.asmx/Select", /* 注意后面的名字对应CS的方法名称 */
data: { "pageNo":(pageNo-1)*pageItems }, /* 注意参数的格式和名称 */
contentType: "application/x-www-form-urlencoded",
dataType: "xml",
error: function (result) {
alert(result.responseText);
},
success: function (data) {
MaxPage = $(data).find('gbook').size();
t = "<table border='1'>";
$(data).find('gbook').each(function (index, ele) {
var id = $(ele).find('id').text();
var title = $(ele).find('title').text();
var name = $(ele).find('name').text();
var time = $(ele).find('time').text();
var content = $(ele).find('content').text();
t += "<tr>";
t += "<td>" + title + "</td>";
t += "<td>" + id + "</td>";
t += "<td>" + time + "</td>";
t += "<td>" + content + "</td>";
t += "</tr>";
})
t += "</table>";
t += "<div><a href='' onclick='showPage(-1);return false;'>上一页</a> <a href='' onclick='showPage(1);return false;'>下一页</a></div>"
$("#result").html(t);
}
});
}
</script>
</body>
</html>
cs
C# codeusing System.Data;
using System.Data.SqlClient;
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService3 : System.Web.Services.WebService
{
[WebMethod]
public System.Data.DataSet Select(int pageNo)
{
System.Data.SqlClient.SqlConnection sqlCon = new SqlConnection();
sqlCon.ConnectionString = "server=.;uid=sa;pwd=sa;database=guestbook";
//定义SQL语句
string SqlStr = "select id,title from gbook order by id desc";
//实例化SqlDataAdapter对象
SqlDataAdapter da = new SqlDataAdapter(SqlStr, sqlCon);
DataSet ds = new DataSet();
da.Fill(ds,pageNo,3,"gbook");
return ds;
}
}
下面是查询和显示留言的代码：
test.aspx
HTML code<%@ Page Language="C#" AutoEventWireup="true" %>
<!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 id="Head1" runat="server">
<title></title>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="result">
</div>
</form>
<script type="text/javascript">
var pageNo = 1; //当前页号
var pageItems = 3; //每页显示的行数，这个数字与da.Fill(ds,pageNo,3,"gbook");里面的3保持一致
var MaxPage = pageItems;
function showPage(m) {
if (m == -1) {
if (pageNo < 2) {
alert("已经到了首页");
return;
};
MaxPage = pageItems;
}
else {
if (MaxPage < pageItems) {
alert("已经到了末页");
return;
};
}
pageNo += m;
getData();
}
$(document).ready(function () {
getData();
});
function getData() {
$.ajax({
type: "POST",
cache: false,
url: "WebService3.asmx/Select", /* 注意后面的名字对应CS的方法名称 */
data: { "pageNo":(pageNo-1)*pageItems }, /* 注意参数的格式和名称 */
contentType: "application/x-www-form-urlencoded",
dataType: "xml",
error: function (result) {
alert(result.responseText);
},
success: function (data) {
MaxPage = $(data).find('gbook').size();
t = "<table border='1'>";
$(data).find('gbook').each(function (index, ele) {
var id = $(ele).find('id').text();
var title = $(ele).find('title').text();
var name = $(ele).find('name').text();
var time = $(ele).find('time').text();
var content = $(ele).find('content').text();
t += "<tr>";
t += "<td>" + title + "</td>";
t += "<td>" + id + "</td>";
t += "<td>" + time + "</td>";
t += "<td>" + content + "</td>";
t += "</tr>";
})
t += "</table>";
t += "<div><a href='' onclick='showPage(-1);return false;'>上一页</a> <a href='' onclick='showPage(1);return false;'>下一页</a></div>"
$("#result").html(t);
}
});
}
</script>
</body>
</html>
cs
C# codeusing System.Data;
using System.Data.SqlClient;
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService3 : System.Web.Services.WebService
{
[WebMethod]
public System.Data.DataSet Select(int pageNo)
{
System.Data.SqlClient.SqlConnection sqlCon = new SqlConnection();
sqlCon.ConnectionString = "server=.;uid=sa;pwd=sa;database=guestbook";
//定义SQL语句
string SqlStr = "select id,title from gbook order by id desc";
//实例化SqlDataAdapter对象
SqlDataAdapter da = new SqlDataAdapter(SqlStr, sqlCon);
DataSet ds = new DataSet();
da.Fill(ds,pageNo,3,"gbook");
return ds;
}
}
...全文
请发表友善的回复…
发表回复
孟子E章 2012-08-15
- 打赏
- 举报
sqlCon.Open();
SqlCommand command = new SqlCommand(SqlStr, sqlCon);
command.ExecuteNonQuery();
SqlCommand command = new SqlCommand(SqlStr, sqlCon);
command.ExecuteNonQuery();
杰拉尔 2012-08-15
- 打赏
- 举报
- - 成型的功能不如去下个例子来
给你个网址看看。
http://download.csdn.net/search?sort=&q=jquery+ajax%E5%88%86%E9%A1%B5&per_page=1
给你个网址看看。
http://download.csdn.net/search?sort=&q=jquery+ajax%E5%88%86%E9%A1%B5&per_page=1
ablddslew 2012-08-15
- 打赏
- 举报
[Quote=引用 9 楼 的回复:]
function deleteData(id)
{
$.ajax({
type: "POST",
cache: false,
url: "WebService3.asmx/Delete", /* 注意后面的名字对应CS的方法名称 */
data: { "id":id }, /* 注意参数的格式和名称 */
contentType: "application/……
[/Quote]
非常感谢，可我还是存在许多问题
public System.Data.DataSet Delete(int id)
{
System.Data.SqlClient.SqlConnection sqlCon = new SqlConnection();
sqlCon.ConnectionString = "server=.;uid=sa;pwd=sa;database=guestbook";
//定义SQL语句
string SqlStr = "delete from gbook where id=" + id;
//实例化SqlDataAdapter对象
SqlDataAdapter da = new SqlDataAdapter(SqlStr, sqlCon);
DataSet ds = new DataSet();
da.Fill(ds, pageNo, 3, "gbook");
return ds;
}
这里不对，具体该怎么写呢
另外，也请至少给我其中一个回复或添加的代码，因为这两个类似，但和delete却有一定差别，我不会，万分感激，叩首致谢。
function deleteData(id)
{
$.ajax({
type: "POST",
cache: false,
url: "WebService3.asmx/Delete", /* 注意后面的名字对应CS的方法名称 */
data: { "id":id }, /* 注意参数的格式和名称 */
contentType: "application/……
[/Quote]
非常感谢，可我还是存在许多问题
public System.Data.DataSet Delete(int id)
{
System.Data.SqlClient.SqlConnection sqlCon = new SqlConnection();
sqlCon.ConnectionString = "server=.;uid=sa;pwd=sa;database=guestbook";
//定义SQL语句
string SqlStr = "delete from gbook where id=" + id;
//实例化SqlDataAdapter对象
SqlDataAdapter da = new SqlDataAdapter(SqlStr, sqlCon);
DataSet ds = new DataSet();
da.Fill(ds, pageNo, 3, "gbook");
return ds;
}
这里不对，具体该怎么写呢
另外，也请至少给我其中一个回复或添加的代码，因为这两个类似，但和delete却有一定差别，我不会，万分感激，叩首致谢。
孟子E章 2012-08-15
- 打赏
- 举报
function deleteData(id)
{
$.ajax({
type: "POST",
cache: false,
url: "WebService3.asmx/Delete", /* 注意后面的名字对应CS的方法名称 */
data: { "id":id }, /* 注意参数的格式和名称 */
contentType: "application/x-www-form-urlencoded",
dataType: "text",
error: function (result) {
alert(result.responseText);
},
success: function (data) {
alert(data)
}
你 的webService再加个Delete方法就可以了，
回复，添加留言都是类似。就是把数据提交到服务器上，服务器得到数据，操作数据表
}
{
$.ajax({
type: "POST",
cache: false,
url: "WebService3.asmx/Delete", /* 注意后面的名字对应CS的方法名称 */
data: { "id":id }, /* 注意参数的格式和名称 */
contentType: "application/x-www-form-urlencoded",
dataType: "text",
error: function (result) {
alert(result.responseText);
},
success: function (data) {
alert(data)
}
你 的webService再加个Delete方法就可以了，
回复，添加留言都是类似。就是把数据提交到服务器上，服务器得到数据，操作数据表
}
杰拉尔 2012-08-15
- 打赏
- 举报
没必要写这么麻烦用局部视图来操作。
比如现在是你的页面叫 list (list 页面有个div存放异步取过来的分页列表)
还有一个页面专门写分页代码叫page
然后在list里面写
$.ajax({
type: "get",
cache: false,
url: "page.aspx", /* 注意后面的名字对应CS的方法名称 */
data: { "pageNo":(pageNo-1)*pageItems }, /* 注意参数的格式和名称 */
contentType: "application/x-www-form-urlencoded",
dataType: "html",
error: function (result) {
$("#div").html(result);
},
比如现在是你的页面叫 list (list 页面有个div存放异步取过来的分页列表)
还有一个页面专门写分页代码叫page
然后在list里面写
$.ajax({
type: "get",
cache: false,
url: "page.aspx", /* 注意后面的名字对应CS的方法名称 */
data: { "pageNo":(pageNo-1)*pageItems }, /* 注意参数的格式和名称 */
contentType: "application/x-www-form-urlencoded",
dataType: "html",
error: function (result) {
$("#div").html(result);
},
ablddslew 2012-08-15
- 打赏
- 举报
已经先结一 帖子，把分都给你了
ablddslew 2012-08-15
- 打赏
- 举报
我也在尝试，只是jquery我实在不会，所以才来发帖求助，这次任务比较急，没多少时间可以学习
孟子E章 2012-08-15
- 打赏
- 举报
思路都给你了，你应该自己练习啊，别人也有工作，让别人都给你写出来吗？
ablddslew 2012-08-15
- 打赏
- 举报
放心，你这么热情的帮助我，我会及时结贴，把分给你的
之所以到现在没结贴，只是想先把整个留言本做出来，再一起结贴。
之所以到现在没结贴，只是想先把整个留言本做出来，再一起结贴。
孟子E章 2012-08-15
- 打赏
- 举报
结帖率：0.00%
孟子E章 2012-08-15
- 打赏
- 举报
t += "<td><input type=button value='回复留言' onclick='replayData(" + id + ")'/> <input type=button value='删除留言' onclick='deleteData(" + id + ")'/></td>";
把id传过去就可以删除或者知道回复的哪条了
把id传过去就可以删除或者知道回复的哪条了
ablddslew 2012-08-15
- 打赏
- 举报
这贴先结了
zj25810 2012-08-15
- 打赏
- 举报
有孟老师在...你懂的。
