首页 > 代码库 > javascript;Jquery;获取JSON对象，无刷新评论实例。
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 > 0 ? 1 : 0 }); //匿名类 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对象，无刷新评论实例。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。