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 事件查询综合 推荐收藏
Mar 10 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
利用JavaScript写一个简单计算器
Nov 27 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根据操作系统转换文件名大小写的方法
2014/02/24 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
Webpack path与publicPath的区别详解
2018/05/03 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
python之wxPython应用实例
2014/09/28 Python
Python subprocess库的使用详解
2018/10/26 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
八一慰问活动方案
2014/02/07 职场文书
公民授权委托书范本
2014/09/17 职场文书
教师求职简历自我评价
2015/03/10 职场文书
黄埔军校观后感
2015/06/10 职场文书
《观潮》教学反思
2016/02/17 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python