javascript;Jquery;获取JSON对象，无刷新评论实例。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
//注册btn事件
document.getElementById("btnPost").onclick = function () {
var txtTitle = document.getElementById("txtTitle").value;
var txtContent = document.getElementById("txtContent").value;
var txtEmail = document.getElementById("txtEmail").value;
var xhr = null;
if (typeof (XMLHttpRequest) != undefined) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var tent = JSON.parse(xhr.responseText);
if (tent.IsOK == "1") {
document.getElementById("fontMsg").innerHTML = "评论成功！";
document.getElementById("fontMsg").color = "green";
//动态添加数据到页面显示
var tbody = document.getElementById("tbody1");
var trobj = tbody.insertRow(-1);
trobj.insertCell(-1).innerHTML = tent.autoId; //编号
trobj.insertCell(-1).innerHTML = txtTitle; //标题
trobj.insertCell(-1).innerHTML = txtContent; //内容
trobj.insertCell(-1).innerHTML = txtEmail; //邮箱
}
else if (tent.IsOK == "0") {
document.getElementById("fontMsg").innerHTML = "评论失败！";
document.getElementById("fontMsg").color = "red";
}
}
};
xhr.open("Post", "AddComments.ashx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("title=" + txtTitle + "&content=" + txtContent + "&email=" + txtEmail);
};
//加载评论
var xhr = null;
if (typeof (XMLHttpRequest) != undefined) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var Comments = JSON.parse(xhr.responseText);
var tbody = document.getElementById("tbody1");
for (var i = 0; i < Comments.length; i++) {
var trobj = tbody.insertRow(-1);
trobj.insertCell(-1).innerHTML = Comments[i].autoId;
trobj.insertCell(-1).innerHTML = Comments[i].title;
trobj.insertCell(-1).innerHTML = Comments[i].content;
trobj.insertCell(-1).innerHTML = Comments[i].email;
}
}
};
xhr.open("Get", "GetComments.ashx", true);
xhr.send(null);
};
</script>
</head>
<body>
评论：<br />
<table border="1">
<tr>
<td>标题：</td>
<td><input type="text" id="txtTitle" value="" /></td>
</tr>
<tr>
<td>内容：</td>
<td><input type="text" id="txtContent" value="" /></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id="txtEmail" value="" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnPost" value="评论" /><font id="fontMsg"></font></td>
</tr>
</table>
<p>=========================================================</p>
<table>
<tr>
<td>编号：</td>
<td>标题：</td>
<td>内容：</td>
<td>邮箱：</td>
</tr>
<tbody id="tbody1"></tbody>
</table>
</body>
</html>
一般处理程序:
using MyPerson.BLL;
using MyPerson.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization; namespace MyPerson.UI.Ajax
{
/// <summary>
/// AddComments 的摘要说明
/// </summary>
public class AddComments : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (context.Request["title"] != null && context.Request["content"] != null && context.Request["email"] != null)
{
TblComments model = new TblComments();
model.title = context.Request["title"];
model.content = context.Request["content"];
model.email = context.Request["email"];
int n = new CommentsBll().AddComment(model);
string json = new JavaScriptSerializer().Serialize(new { autoId = n, IsOK = n > ? : }); //匿名类
context.Response.Write(json);
}
} public bool IsReusable
{
get
{
return false;
}
}
}
}
jquery版：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
//注册btn事件
$("#btnPost").click(function () {
var txtTitle = $("#txtTitle").val();
var txtContent = $("#txtContent").val();
var txtEmail = $("#txtEmail").val();
$.getJSON("AddComments.ashx", { "title": txtTitle, "content": txtContent, "email": txtEmail }, function (_data) {
if (_data.IsOK == "1") {
$("#fontMsg").html("评论成功！");
$("#fontMsg").css("color", "green");
//动态添加数据到页面显示
var tr = $("<tr><td>" + _data.autoId + "</td><td>" + txtTitle + "</td><td>" + txtContent + "</td><td>" + txtEmail + "</td></tr>");
$("#tbody1").append(tr);
}
else if (_data.IsOK == "0") {
$("#fontMsg").html("评论失败！");
$("#fontMsg").css("color", "red");
}
});
});
//加载评论
$.getJSON("GetComments.ashx", null, function (_data) {
$.each(_data, function (key, value) {
var tr = $("<tr><td>" + value.autoId + "</td><td>" + value.title + "</td><td>" + value.content + "</td><td>" + value.email + "</td></tr>");
$("#tbody1").append(tr);
});
});
});
</script>
</head>
<body>
评论：<br />
<table border="1">
<tr>
<td>标题：</td>
<td><input type="text" id="txtTitle" value="" /></td>
</tr>
<tr>
<td>内容：</td>
<td><input type="text" id="txtContent" value="" /></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id="txtEmail" value="" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnPost" value="评论" /><font id="fontMsg"></font></td>
</tr>
</table>
<p>=========================================================</p>
<table>
<tr>
<td>编号：</td>
<td>标题：</td>
<td>内容：</td>
<td>邮箱：</td>
</tr>
<tbody id="tbody1"></tbody>
</table>
</body>
</html>
javascript;Jquery;获取JSON对象，无刷新评论实例。的更多相关文章
- javascript;Jquery;获取JSON对象，无刷新分页，异步加载，异步删除，实例。
AjaxNewsList: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- jquery获取json对象中的key小技巧
jquery获取json对象中的key小技巧 比如有一个json var json = {"name" : "Tom", "age" : 1 ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...
- ajax分页2：jquery.pagination +JSON 动态无刷新分页
静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- jquery获取json对象中的key小技巧，遍历json串所有key，value
比如有一个json var json = {"name" : "Tom", "age" : 18}; 想分别获取它的key 和 value ...
- jquery.pagination +JSON 动态无刷新分页
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs& ...
- javascript获取json对象的key名称的两种方法
javascript获取json对象的key名称的两种方法 数据处理中,你可能接收到一个不确定内容格式的json对象,然后要把key的值提取出来.今天试过两种可以提取json key的方法,均可以正常 ...
- jQuery 无刷新评论
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- android属性动画之ValueAnimator
楼主前段时间做一个android项目,其中一个需求是需要制作一个动画,但是之前楼主没接触过android动画,所以在网上搜了下,并且也有人推荐可以试下用属性动画,所以我就百度了下属性动画怎么用,并顺便 ...
- 很easy的js双向绑定框架（二）：控制器继承
初衷 上一篇已经实现了数据的双向绑定,但model的控制范围是整个文档.在实际project中必需要有作用范围,以便做ui模块的拆分. 这一篇,我们希望实现像angularjs一样的控制器继承: 1. ...
- Unity3D学习笔记——GUI高级组件
Unity3D中的高级控件都是由GUI类引出的,高级控件是由系统实现的,所以效率很高,但也可以自己实现,优点是任意修改灵活性高. 一:Label控件:用于展示一段文字的控件.可以输入字符串,也可以是贴 ...
- hdu 2460(tarjan求边双连通分量+LCA)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2460 思路:题目的意思是要求在原图中加边后桥的数量,首先我们可以通过Tarjan求边双连通分量,对于边 ...
- python3----函数(sort和sorted)
在学习python的过程中,感觉python中的排序相和c++中的泛型算法还是比较相似的,但相对于c++而言更加简单易用. python中列表的内置函数sort()可以对列表中的元素进行排序,而全局性 ...
- python3----字符串中的字符倒转
方法一,使用[::-1]: s = 'python' print(s[::-1]) 方法二,使用reverse()方法: n = list(s) n.reverse() print(''.join(n ...
- Python简单的线程池
class ThreadPool(object): def __init__(self, max_num=20): # 创建一个队列,队列里最多只能有10个数据 self.queue = queue. ...
- 利用.Net中Process类调用netstat命令来判断计算端口的使用情况
利用.Net中Process类调用netstat命令来判断计算端口的使用情况: Process p = new Process();p.StartInfo = new ProcessStartInfo ...
- openssl 升级 操作 -1
好多公司都会用绿盟扫描系统漏洞,里边就会涉及到ssl 漏洞,原因是openssl 版本低导致,会让你升级到指定版本.下面就介绍一下openssl 版本升级的操作方案. 一. 查看系统版本 [root@ ...
- HashMap和ConcurrentHashMap的区别，HashMap的底层源码。
Hashmap本质是数组加链表.根据key取得hash值,然后计算出数组下标,如果多个key对应到同一个下标,就用链表串起来,新插入的在前面. ConcurrentHashMap:在hashMap的基 ...