Json实现异步请求提交评论无需跳转其他页面


Posted in Javascript onOctober 11, 2014

主要将代码粘贴,通过阅读代码理解其中的相关逻辑。

html代码:

<form id="form1" runat="server"> 
<p> 
评论:</p> 
<p> 
姓名:<input type="text" name="username" id="username1" /></p> 
<p> 
内容:<textarea name="content" id="content" rows="2" cols="20"></textarea></p> 
<p> 
<input type="button" id="send" value="提交" /></p> 
</form> 
<div class="comment"> 
已有评论:</div> 
<div id="resText"> 
</div>

js代码:

$("#send").click(function () { 
$.get("doSave.ashx", {<span style="white-space:pre"> </span> <span style="font-family: Arial, Helvetica, sans-serif;"> </span>//调用json插件 
u_name: $("#username1").val(), //json数据/值对化 
u_cont: $("#content").val() 
}, function (data) 
var uName = data.username; //注:此处的username与doSave.ashx中的dic.add("username",uname)中的username相对应的 
var uCont = data.content; 
var txtHtml = "<div class='comment'><h6>" 
+ uName + ":</h6><p class='para'>" 
+ uCont + "</p></div>" 
$("#resText").html(txtHtml); //将返回的数据添加到页面上 
}, "json"); 
})

插件代码:

<%@ WebHandler Language="C#" Class="doSave" %> 

using System; 
using System.Web; 

public class doSave : IHttpHandler 
{ 

public void ProcessRequest(HttpContext context) 
{ 

var dic = new System.Collections.Generic.Dictionary<string, object>(); //存储的集合 
string jsonStr = "{}"; //新建字符串jsonStr 

context.Response.ContentType = "text/json"; //定义返回的内容类型为json 

string uname = context.Request.QueryString[0]; //获取请求参数中第一个参数,也可以直接使用uname 

string commet = context.Request.QueryString[1]; //定义字符串uname、commet为context请求查询的字符串context.Request.Params["username"];QyertStrubg:查询字符串 

dic.Add("username", uname); //将字符串添加到对象中 

dic.Add("content", commet); 

jsonStr = Newtonsoft.Json.JsonConvert.SerializeObject(dic); //序列化集合为json字符串 

context.Response.Write(jsonStr); 
} 

public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 

}

此处效果即为,在输入框中输入相关文字,点击提交,下方会自动将书写的文字进行展示,无需跳转其他页面。

Javascript 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 #Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 #Javascript
JS 获取鼠标左右键的键值方法
Oct 11 #Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 #Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 #Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 #Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 #Javascript
You might like
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python+django实现简单的文件上传
2016/08/17 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Pytorch to(device)用法
2020/01/08 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
网络研修随笔感言
2014/02/17 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
搞笑老公保证书
2015/02/26 职场文书
团员个人总结
2015/02/26 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
教师培训学习心得体会
2016/01/21 职场文书