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 相关文章推荐
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
JS性能优化实现方法及优点进行
Aug 30 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python opencv之SURF算法示例
2018/02/24 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Python如何实现定时器功能
2020/05/28 Python
大学生怎样进行自我评价
2013/12/07 职场文书
采购员的工作职责
2013/12/26 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
20年同学聚会感言
2014/02/03 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
消防验收申请报告
2015/05/15 职场文书
如何写通讯稿
2015/07/22 职场文书
大学入学感言
2015/08/01 职场文书
公司食堂管理制度
2015/08/05 职场文书
赡养老人协议书范本
2015/08/06 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技