主要将代码粘贴，通过阅读代码理解其中的相关逻辑。
HTML代码：
姓名：
内容：</p> <p> <input type="button" id="send" value="提交" /></p> </form> <div class="comment"> 已有<a href="https://www.jb51.cc/tag/pinglun/" target="_blank" class="keywords">评论</a>：</div> <div id="resText"> </div> </pre> </div> <p>js<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>：</p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;"> $("#send").click(function () { $.get("doSave.ashx",{<span style="white-space:pre"> </span> <span style="font-family: Arial,Helvetica,sans-serif;"> </span>//<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>json<a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a> 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); //将返回的数据<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>到<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>上 },"json"); })</pre> </div> <p><a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a><a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>：</p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:csharp;"> <%@ WebHandler Language="C#" Class="doSave" %> <p>using Sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>;<br /> using Sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>.Web; </p> <p>public class doSave : IHttpHandler<br /> { </p> <p>public void ProcessRequest(HttpContext context)<br /> { </p> <p>var dic = new Sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>.Collections.Generic.Dictionary<string,object>(); //存储的集合<br /> string jsonStr = "{}"; //新建字符串jsonStr </p> <p>context.Response.ContentType = "text/json"; //定义返回的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>类型为json </p> <p>string uname = context.Request.QueryString[0]; //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>请求参数中第<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>参数，也可以直接使用uname </p> <p>string commet = context.Request.QueryString[1]; //定义字符串uname、commet为context请求<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>的字符串context.Request.P<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms["username"];QyertStrubg:<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>字符串 </p> <p>dic.Add("username",uname); //将字符串<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>到对象中 </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>此处<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>即为，在输入框中输入相关<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>，点击提交，下方会<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>将书写的<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>进行展示，无需<a href="https://www.jb51.cc/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a>其他<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/yibuqingqiu/" class="tag_link" target="_blank">异步请求</a></div> </div> </div> </div> <!-- row end--> <div class="clearfix"></div> <!-- row --> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>相关文章</h1></div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/07-30/10/71a2262aa7e5c72cb07d2f3e32b1d2a2.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4739037.html" title="【JavaScript】聊一聊js中的浅拷贝与深拷贝与手写实现">【JavaScript】聊一聊js中的浅拷贝与深拷贝与手写实现</a> </div> <div class="summary">什么是深拷贝与浅拷贝？深拷贝与浅拷贝是js中处理对象或数据...</div> </div><div class="list_con"> <div class="title"> <a href="https://m.jb51.cc/js/4739036.html" title="【JavaScript】前端算法题（重建二叉树、反向输出链表每个节点）">【JavaScript】前端算法题（重建二叉树、反向输出链表每个节点）</a> </div> <div class="summary">前言 今天复习了一些前端算法题，写到一两道比较有意思的题：...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/07-30/10/722d62c6b119ef7c0f54f9c0c68c2c56.jpg" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4739035.html" title="【JavaScript】聊聊js中关于this的指向">【JavaScript】聊聊js中关于this的指向</a> </div> <div class="summary">最近在看回JavaScript的面试题，this 指向问题是入坑前端必须...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2022/01-13/18/1662e1e23a972adfd4c7eb13ed97b0b9.gif" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4675608.html" title="js如何实现弹出form提交表单？">js如何实现弹出form提交表单？</a> </div> <div class="summary">js如何实现弹出form提交表单？（图文+视频）</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2022/01-13/18/aefa150d17138168dd5f72e5326e0b21.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4675588.html" title="js怎么获取复选框选中的值">js怎么获取复选框选中的值</a> </div> <div class="summary">js怎么获取复选框选中的值</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2022/01-13/18/0699e4dc91b71c1ec0d5eee3c437ab6d.gif" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4675585.html" title="js如何实现倒计时跳转页面">js如何实现倒计时跳转页面</a> </div> <div class="summary">js如何实现倒计时跳转页面</div> </div></div> </div> <!-- row end--> </div> </div> <footer id="footer"> <div class="container"> <div class="copyright"> Copyright © 2018 编程之家. 当前版本 V7.0.16<br> <span class="ml5">编程之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> </footer> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script src="https://m.jb51.cc/js/count.js"></script> </body> </html>
