Json实现异步请求(提交评论)
主要将代码粘贴,通过阅读代码理解当中的相关逻辑。
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;
- }
- }
- }
此处效果即为,在输入框中输入相关文字,点击提交,下方会自己主动将书写的文字进行展示,无需跳转其它页面。
Json实现异步请求(提交评论)的更多相关文章
- 同步请求与异步请求Json
同步请求的返回值类型 : void : 啥也不返回 String :表示逻辑视图名 ModelAndView:该对象既有逻辑视图名,还可以携带去页面要展示的数据 同步请求:如何将controller层 ...
- Ajax异步请求struts的JSON机制(省市区三级联动)
1.struts.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts P ...
- python爬虫(3)——用户和IP代理池、抓包分析、异步请求数据、腾讯视频评论爬虫
用户代理池 用户代理池就是将不同的用户代理组建成为一个池子,随后随机调用. 作用:每次访问代表使用的浏览器不一样 import urllib.request import re import rand ...
- 【转载】LR提交JSON格式的请求
需求: 测试一个“修改用户铜板”的接口,这个接口接收JSON格式的请求,返回JSON格式的结果: 必须用PUT方式提交请求: 提交内容: {"method":"modi ...
- jquery的ajax异步请求接收返回json数据
http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...
- ASIHTTPRequest异步请求 分类: ios技术 2015-03-01 09:33 48人阅读 评论(0) 收藏
我们运行程序,如果网速很慢,查询的时候会一直黑屏,直到请求结束画面才出现,这样用户体验很不好.因此同步请求一般只是在某个子线 程中使用,而不在主线程中使用.异步请求的用户体验要比同步请求好,因此一般情 ...
- JSON(四)——异步请求中前后端使用Json格式的数据进行交互
json格式的数据广泛应用于异步请求中前后端的数据交互,本文主要介绍几种使用场景和使用方法. 一,json格式字符串 <input type="button" id=&quo ...
- 异步请求取得json数据
一.异步请求 在之前我们请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源.但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异步请求来实现这 ...
- 异步请求Ajax(取得json数据)
异步请求Ajax 没有学习Ajax之前请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源.但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异 ...
随机推荐
- django 常见过滤器
一.形式:小写 {{ name | lower }} 二.过滤器是可以嵌套的,字符串经过三个过滤器,第一个过滤器转换为小写,第二个过滤器输出首字母,第三个过滤器将首字母转换成大写 标签 {{ st ...
- GT使用说明
GT文档:https://gt.qq.com/docs.html GT Android版的详细使用手册: https://gt.qq.com/docs/a/GTAndroidUserGuide.pdf
- Android几秒后自动关闭dialog
代码改变世界 Android几秒后自动关闭dialog AlertDialog.Builder builder = new AlertDialog.Builder(v.getContext()); b ...
- jQuery中文文档
http://www.jquery123.com/ http://www.shifone.cc/
- 持续集成---jenkins环境部署
一.环境准备 操作系统:linux系统,此时我安装的是centos6.5,操作步骤具体见博客<虚拟机安装centos6.5> 依赖软件:1.jdk, 2.tomcat9(需要安装两个,一个 ...
- 刷题总结——卡牌配对(bzoj4205网络流)
题目: Description 现在有一种卡牌游戏,每张卡牌上有三个属性值:A,B,C.把卡牌分为X,Y两类,分别有n1,n2张. 两张卡牌能够配对,当且仅当,存在至多一项属性值使得两张卡牌该项属性值 ...
- 【CCF】交通规划 Dijstra变形 优先级队列重载
[题意] 给定一个无向图,求这个图满足所有点到顶点的最短路径不变的最小生成树 [AC] 注意双向边要开2*maxm 注意优先级队列 参考https://www.cnblogs.com/cielosun ...
- gcc/g++ 编译时出现:“对’xxxx’未定义的引用,collect2: error: ld returned 1 exit status” 的错误
出现的问题: 在使用 make 编译实现一个程序时,出现了下面的错误.查看程序源文件所在的目录时发现程序已经完成了编译,并生成了 list_repo.o 的文件,说明是在程序链接生成可执行文件时发生了 ...
- cf287E Main Sequence
As you know, Vova has recently become a new shaman in the city of Ultima Thule. So, he has received ...
- Redis集群模式配置
redis集群部署安装: https://blog.csdn.net/huwh_/article/details/79242625 https://www.cnblogs.com/mafly/p/re ...