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使用cookie
Feb 02 Javascript
利用js对象弹出一个层
Mar 26 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
express express-session的使用小结
Dec 12 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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的SQL注入过程分析
2012/01/06 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
PHP多例模式介绍
2013/06/24 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python实现音乐下载器
2018/04/15 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
python解释器spython使用及原理解析
2019/08/24 Python
Python绘制股票移动均线的实例
2019/08/24 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
中专毕业生自我鉴定
2014/02/02 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2015年测量员工作总结
2015/05/23 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python
python全面解析接口返回数据
2022/02/12 Python