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 相关文章推荐
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
js 代码优化点滴记录
Feb 19 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 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
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
动态添加js事件实现代码
2009/03/12 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
小程序api实现promise封装过程解析
2019/11/21 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
python分布式编程实现过程解析
2019/11/08 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
英文版区域经理求职信
2013/10/23 职场文书
车间班组长的职责
2013/12/13 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android