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 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
实现vuex原理的示例
Oct 21 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
php unlink()函数使用教程
2018/07/12 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
angular十大常见问题
2017/03/07 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
python中altair可视化库实例用法
2021/01/26 Python
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
外贸业务员工作职责
2014/01/06 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
公务员培的训心得体会
2014/09/01 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
Golang: 内建容器的用法
2021/05/05 Golang
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
nginx lua 操作 mysql
2022/05/15 Servers
Python first-order-model实现让照片动起来
2022/06/25 Python