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 权威指南(第四版) 读书笔记
Aug 11 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
解决小程序无法触发SESSION问题
Feb 03 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
php学习之function的用法
2012/07/14 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
跟老齐学Python之Python安装
2014/09/12 Python
Python二分法搜索算法实例分析
2015/05/11 Python
python统计日志ip访问数的方法
2015/07/06 Python
python机器学习之神经网络(三)
2017/12/20 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
Python创建自己的加密货币的示例
2021/03/01 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
高中生的自我评价
2014/03/04 职场文书
党员一帮一活动总结
2014/07/08 职场文书
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记