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实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 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分页函数
2006/10/09 PHP
php5中类的学习
2008/03/28 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
微信支付的开发流程详解
2016/09/13 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
python单例模式实例解析
2018/08/28 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
python中pop()函数的语法与实例
2020/12/01 Python
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
销售实习自我鉴定
2013/12/07 职场文书
机关作风建设工作总结
2014/10/23 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL