当前位置: 首页 > 编程笔记 >

Json实现异步请求提交评论无需跳转其他页面

陶唯
2023-03-14
本文向大家介绍Json实现异步请求提交评论无需跳转其他页面,包括了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; 
} 
} 

}

此处效果即为,在输入框中输入相关文字,点击提交,下方会自动将书写的文字进行展示,无需跳转其他页面。

 类似资料:
  • 本文向大家介绍thinkjs之页面跳转同步异步操作,包括了thinkjs之页面跳转同步异步操作的使用技巧和注意事项,需要的朋友参考一下 对于刚入手thinkjs项目的新手来说,时常会犯的一个错误就是“混用”各种代码逻辑,比如:我们经常在做后台管理系统的时候用到的登录框, 其实它原本是有一个路由专门存放自己的代码逻辑,而在点击提交按钮的时候,要达到的效果便是账号密码正确的时候,正常跳转页面,而错误的

  • 本文向大家介绍jquery请求servlet实现ajax异步请求的示例,包括了jquery请求servlet实现ajax异步请求的示例的使用技巧和注意事项,需要的朋友参考一下 ajax可以发送异步请求实现无刷新效果,但是使用javascript比较麻烦,就query提供了一些封装的方法 ,可以使得操作更为简单: $.ajax()方法: $.get()方法: $.post()方法: $.load()

  • 本文向大家介绍javascript无刷新评论实现方法,包括了javascript无刷新评论实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript无刷新评论实现方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍PHP+iFrame实现页面无需刷新的异步文件上传,包括了PHP+iFrame实现页面无需刷新的异步文件上传的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了PHP+iFrame实现页面无需刷新的异步文件上传,是非常实用的常见技巧。分享给大家供大家参考。具体分析如下: 说到iframe,现在用它的人是越来越少了,并且很多人都相信它应该被AJAX所取代,的确如此,因为AJAX太出

  • 本文向大家介绍jQuery实现评论模块,包括了jQuery实现评论模块的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery实现评论模块的具体代码,供大家参考,具体内容如下 本模块可用于评论或留言,输入区模仿畅言,内容显示使用时间轴,以下是示例图。 实现代码如下: index.html publish_comment.css 以上就是本文的全部内容,希望对大家的学习有所帮助,也

  • 本文向大家介绍jQuery异步提交表单实例,包括了jQuery异步提交表单实例的使用技巧和注意事项,需要的朋友参考一下 前言: 我们在开发的时候,一定会使用ajax异步提交表单,在这里总结一下: 前提准备:引入脚本 前台页面: 后台servlet代码: web.xml配置 注意: ajaxSubmit({})的也可以这样设置表单的method、action、表单项 以上所述是小编给大家介绍的jQu