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 相关文章推荐
node.js读取文件到字符串的方法
Jun 29 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
理顺8个版本vue的区别(小结)
Sep 17 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
深入理解javascript中的this
Feb 08 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面试题集锦
2012/03/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python中的ceil()方法使用教程
2015/05/14 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
python中tab键是什么意思
2020/06/18 Python
Python 中Operator模块的使用
2021/01/30 Python
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
考核评语大全
2014/04/29 职场文书
考博专家推荐信
2014/05/10 职场文书
校庆活动策划方案
2014/06/05 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
班主任经验交流材料
2014/12/16 职场文书
运动员入场前导词
2015/07/20 职场文书
运动会广播稿300字
2015/08/19 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
python前后端自定义分页器
2022/04/13 Python