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的一些看法
May 27 Javascript
Javascript实现计算个人所得税
May 10 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
jquery 插件学习(三)
2012/08/06 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
JS中Location使用详解
2015/05/12 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
python支付宝支付示例详解
2019/08/22 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
化妆品活动策划方案
2014/05/23 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
门球健将观后感
2015/06/16 职场文书
小学语文国培研修日志
2015/11/13 职场文书
分家协议书范本
2016/03/22 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers