主要将代码粘贴，通过阅读代码理解其中的相关逻辑。
html代码：
姓名：
内容：</p> <p> <input type="button" id="send" value="提交" /></p> </form> <div class="comment"> 已有评论：</div> <div id="resText"> </div> </pre> </div> <p>js代码：</p> <div class="jb51code"> <pre class="brush: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"); })</pre> </div> <p>插件代码：</p> <div class="jb51code"> <pre class="brush:csharp;"> <%@ WebHandler Language="C#" Class="doSave" %> <p>using System;<br /> using System.Web; </p> <p>public class doSave : IHttpHandler<br /> { </p> <p>public void ProcessRequest(HttpContext context)<br /> { </p> <p>var dic = new System.Collections.Generic.Dictionary<string,object>(); //存储的集合<br /> string jsonStr = "{}"; //新建字符串jsonStr </p> <p>context.Response.ContentType = "text/json"; //定义返回的内容类型为json </p> <p>string uname = context.Request.QueryString[0]; //获取请求参数中第一个参数，也可以直接使用uname </p> <p>string commet = context.Request.QueryString[1]; //定义字符串uname、commet为context请求查询的字符串context.Request.Params["username"];QyertStrubg:查询字符串 </p> <p>dic.Add("username",uname); //将字符串添加到对象中 </p> <p>dic.Add("content",commet); </p> <p>jsonStr = Newtonsoft.Json.JsonConvert.SerializeObject(dic); //序列化集合为json字符串 </p> <p>context.Response.Write(jsonStr);<br /> } </p> <p>public bool IsReusable<br /> {<br /> get<br /> {<br /> return false;<br /> }<br /> } </p> <p>}</pre></p> </div> <p>此处效果即为，在输入框中输入相关文字，点击提交，下方会自动将书写的文字进行展示，无需跳转其他页面。</p><p class="text-muted" style="margin-top:20px;">版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。</p> </div><div class="topcard-tags"><a href="https://www.jb51.cc/tag/yibuqingqiu/" class="tag_link" target="_blank">异步请求</a></div></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <h3>相关推荐</h3> <hr /> <div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4759195.html" title="让kindeditor显示高亮代码">让kindeditor显示高亮代码</a></div> <div class="summary">kindeditor4.x代码高亮功能默认使用的是prettify插件，prettify是Google提供的一款源代码语法高亮着色器，它提供一种简单的形式来着色HTML页面上的程序代码，实现方式如下： 首先在编辑器里面插入javascript代码： 确定后会在编辑器插入这样的代码： <pre</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4759194.html" title="kindeditor4整合SyntaxHighlighter，让代码亮起来">kindeditor4整合SyntaxHighlighter，让代码亮起来</a></div> <div class="summary">这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮，因为SyntaxHighlighter的应用非常广泛，所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675608.html" title="js如何实现弹出form提交表单？">js如何实现弹出form提交表单？</a></div> <div class="summary">js如何实现弹出form提交表单？（图文+视频）</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675588.html" title="js怎么获取复选框选中的值">js怎么获取复选框选中的值</a></div> <div class="summary">js怎么获取复选框选中的值</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675585.html" title="js如何实现倒计时跳转页面">js如何实现倒计时跳转页面</a></div> <div class="summary">js如何实现倒计时跳转页面</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675581.html" title="如何用js控制图片放大缩小">如何用js控制图片放大缩小</a></div> <div class="summary">如何用js控制图片放大缩小</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675580.html" title="JS怎么获取当前时间戳">JS怎么获取当前时间戳</a></div> <div class="summary">JS怎么获取当前时间戳</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675578.html" title="JS如何判断对象是否为数组">JS如何判断对象是否为数组</a></div> <div class="summary">JS如何判断对象是否为数组</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675577.html" title="JS怎么获取图片当前宽高">JS怎么获取图片当前宽高</a></div> <div class="summary">JS怎么获取图片当前宽高</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675574.html" title="JS对象如何转为json格式字符串">JS对象如何转为json格式字符串</a></div> <div class="summary">JS对象如何转为json格式字符串</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675573.html" title="JS怎么获取图片原始宽高">JS怎么获取图片原始宽高</a></div> <div class="summary">JS怎么获取图片原始宽高</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675566.html" title="怎么在click事件中调用多个js函数">怎么在click事件中调用多个js函数</a></div> <div class="summary">怎么在click事件中调用多个js函数</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675564.html" title="js如何往数组中添加新元素">js如何往数组中添加新元素</a></div> <div class="summary">js如何往数组中添加新元素</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675561.html" title="js如何拆分字符串">js如何拆分字符串</a></div> <div class="summary">js如何拆分字符串</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675559.html" title="JS怎么对数组内元素进行求和">JS怎么对数组内元素进行求和</a></div> <div class="summary">JS怎么对数组内元素进行求和</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675557.html" title="JS如何判断屏幕大小">JS如何判断屏幕大小</a></div> <div class="summary">JS如何判断屏幕大小</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675556.html" title="js怎么解析json数据">js怎么解析json数据</a></div> <div class="summary">js怎么解析json数据</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675555.html" title="js如何实时获取浏览器窗口大小">js如何实时获取浏览器窗口大小</a></div> <div class="summary">js如何实时获取浏览器窗口大小</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675552.html" title="原生JS实现别踩白块小游戏（五）">原生JS实现别踩白块小游戏（五）</a></div> <div class="summary">原生JS实现别踩白块小游戏（五）</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/js/4675551.html" title="原生JS实现别踩白块小游戏（一）">原生JS实现别踩白块小游戏（一）</a></div> <div class="summary">原生JS实现别踩白块小游戏（一）</div> </div></div> </div> </div> </div> <div class="col-sm-12 col-md-12 col-lg-3"> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- jb51-article-300x600 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7541177540"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <!-- row end --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门文章</label> <ul class="n-list"><li><a href="https://www.jb51.cc/js/4759195.html" title="让kindeditor显示高亮代码">• 让kindeditor显示高亮代码</a></li><li><a href="https://www.jb51.cc/js/4759194.html" title="kindeditor4整合SyntaxHighlighter，让代码亮起来">• kindeditor4整合SyntaxHighlighter，让…</a></li><li><a href="https://www.jb51.cc/js/4675608.html" title="js如何实现弹出form提交表单？">• js如何实现弹出form提交表单？</a></li><li><a href="https://www.jb51.cc/js/4675588.html" title="js怎么获取复选框选中的值">• js怎么获取复选框选中的值</a></li><li><a href="https://www.jb51.cc/js/4675585.html" title="js如何实现倒计时跳转页面">• js如何实现倒计时跳转页面</a></li><li><a href="https://www.jb51.cc/js/4675581.html" title="如何用js控制图片放大缩小">• 如何用js控制图片放大缩小</a></li><li><a href="https://www.jb51.cc/js/4675580.html" title="JS怎么获取当前时间戳">• JS怎么获取当前时间戳</a></li><li><a href="https://www.jb51.cc/js/4675578.html" title="JS如何判断对象是否为数组">• JS如何判断对象是否为数组</a></li><li><a href="https://www.jb51.cc/js/4675577.html" title="JS怎么获取图片当前宽高">• JS怎么获取图片当前宽高</a></li><li><a href="https://www.jb51.cc/js/4675574.html" title="JS对象如何转为json格式字符串">• JS对象如何转为json格式字符串</a></li></ul> </div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li><a href="https://www.jb51.cc/js/4759195.html" title="让kindeditor显示高亮代码">• 让kindeditor显示高亮代码</a></li><li><a href="https://www.jb51.cc/js/4759194.html" title="kindeditor4整合SyntaxHighlighter，让代码亮起来">• kindeditor4整合SyntaxHighlighter，让…</a></li><li><a href="https://www.jb51.cc/js/4675608.html" title="js如何实现弹出form提交表单？">• js如何实现弹出form提交表单？</a></li><li><a href="https://www.jb51.cc/js/4675588.html" title="js怎么获取复选框选中的值">• js怎么获取复选框选中的值</a></li><li><a href="https://www.jb51.cc/js/4675585.html" title="js如何实现倒计时跳转页面">• js如何实现倒计时跳转页面</a></li><li><a href="https://www.jb51.cc/js/4675581.html" title="如何用js控制图片放大缩小">• 如何用js控制图片放大缩小</a></li><li><a href="https://www.jb51.cc/js/4675580.html" title="JS怎么获取当前时间戳">• JS怎么获取当前时间戳</a></li><li><a href="https://www.jb51.cc/js/4675578.html" title="JS如何判断对象是否为数组">• JS如何判断对象是否为数组</a></li><li><a href="https://www.jb51.cc/js/4675577.html" title="JS怎么获取图片当前宽高">• JS怎么获取图片当前宽高</a></li><li><a href="https://www.jb51.cc/js/4675574.html" title="JS对象如何转为json格式字符串">• JS对象如何转为json格式字符串</a></li></ul> </div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签<a href="https://www.jb51.cc/all" class="pull-right">更多</a> </label> <div class="topcard-tags"><a href="https://www.jb51.cc/tag/python/" title="python">python</a><a href="https://www.jb51.cc/tag/JavaScript/" title="JavaScript">JavaScript</a><a href="https://www.jb51.cc/tag/java/" title="java">java</a><a href="https://www.jb51.cc/tag/HTML/" title="HTML">HTML</a><a href="https://www.jb51.cc/tag/PHP/" title="PHP">PHP</a><a href="https://www.jb51.cc/tag/reactjs/" title="reactjs">reactjs</a><a href="https://www.jb51.cc/tag/C/" title="C#">C#</a><a href="https://www.jb51.cc/tag/Android/" title="Android">Android</a><a href="https://www.jb51.cc/tag/CSS/" title="CSS">CSS</a><a href="https://www.jb51.cc/tag/Nodejs/" title="Node.js">Node.js</a><a href="https://www.jb51.cc/tag/sql/" title="sql">sql</a><a href="https://www.jb51.cc/tag/rp/" title="r">r</a><a href="https://www.jb51.cc/tag/python3x/" title="python-3.x">python-3.x</a><a href="https://www.jb51.cc/tag/MysqL/" title="MysqL">MysqL</a><a href="https://www.jb51.cc/tag/jQuery/" title="jQuery">jQuery</a><a href="https://www.jb51.cc/tag/c4343/" title="c++">c++</a><a href="https://www.jb51.cc/tag/pandas/" title="pandas">pandas</a><a href="https://www.jb51.cc/tag/flutter/" title="Flutter">Flutter</a><a href="https://www.jb51.cc/tag/angular/" title="angular">angular</a><a href="https://www.jb51.cc/tag/IOS/" title="IOS">IOS</a><a href="https://www.jb51.cc/tag/django/" title="django">django</a><a href="https://www.jb51.cc/tag/linux/" title="linux">linux</a><a href="https://www.jb51.cc/tag/swift/" title="swift">swift</a><a href="https://www.jb51.cc/tag/typescript/" title="typescript">typescript</a><a href="https://www.jb51.cc/tag/luyouqi/" title="路由器">路由器</a><a href="https://www.jb51.cc/tag/JSON/" title="JSON">JSON</a><a href="https://www.jb51.cc/tag/luyouqishezhi/" title="路由器设置">路由器设置</a><a href="https://www.jb51.cc/tag/wuxianluyouqi/" title="无线路由器">无线路由器</a><a href="https://www.jb51.cc/tag/h3c/" title="h3c">h3c</a><a href="https://www.jb51.cc/tag/huasan/" title="华三">华三</a><a href="https://www.jb51.cc/tag/huasanluyouqishezhi/" title="华三路由器设置">华三路由器设置</a><a href="https://www.jb51.cc/tag/huasanluyouqi/" title="华三路由器">华三路由器</a><a href="https://www.jb51.cc/tag/diannaoruanjianjiaocheng/" title="电脑软件教程">电脑软件教程</a><a href="https://www.jb51.cc/tag/arrays/" title="arrays">arrays</a><a href="https://www.jb51.cc/tag/docker/" title="docker">docker</a><a href="https://www.jb51.cc/tag/ruanjiantuwenjiaocheng/" title="软件图文教程">软件图文教程</a><a href="https://www.jb51.cc/tag/C/" title="C">C</a><a href="https://www.jb51.cc/tag/vuejs/" title="vue.js">vue.js</a><a href="https://www.jb51.cc/tag/laravel/" title="laravel">laravel</a><a href="https://www.jb51.cc/tag/springboot/" title="spring-boot">spring-boot</a></div> </div> </div> </div> <div class="row row-sm rbox"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- jb51-article-300x600 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7541177540"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </div> </div> <footer id="footer"> <div class="container" style="width:1440px;"> <div class="row hidden-xs"> <div class="col-sm-12 col-md-9 col-lg-9 site-link"> <ul class="list-inline"> <li>友情链接:</li><li><a href="https://www.runoob.com/" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank" rel="nofollow">菜鸟教程</a></li><li><a href="https://ai.jb51.cc/" title="ai导航是编程之家旗下ai方向的ai资讯、ai工具类集合导航站。" target="_blank" rel="nofollow">ai导航</a></li></ul> <ul class="list-inline"> <li><a href="https://www.jb51.cc" title="编程之家">编程之家</a></li>-<li><a href="https://t5m44pq3f7.jiandaoyun.com/f/638ca61b7b079a000a5d2dd6" rel="nofollow" title="我要投稿" target="_blank">我要投稿</a></li>-<li><a target="_blank" rel="nofollow" href="https://t5m44pq3f7.jiandaoyun.com/f/638ca8c69ad234000a79561f" title="广告合作">广告合作</a></li>-<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></li>-<li><a href="https://www.jb51.cc/disclaimers.html" title="免责声明">免责声明</a></li>-<li><a href="https://www.jb51.cc/sitemap/all/index.xml" title="网站地图" target="_blank">网站地图</a></li> </ul> <div>版权所有 © 2018编程之家<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> <div class="col-sm-12 col-md-3 col-lg-3"><img src="https://www.jb51.cc/qrcode.jpg" width="90" alt="微信公众号搜索 “ 程序精选 ” ，选择关注！"> <div class="pull-right">微信公众号搜<span class="text-danger">"程序精选"</span>关注<br />微信扫一扫可直接关注哦！</div> </div> </div> </div> </footer> <script src="https://www.jb51.cc/js/count.js"></script> </body> </html>
