Home  >  Article  >  Web Front-end  >  Json implements asynchronous request to submit comments without jumping to other pages_jquery

Json implements asynchronous request to submit comments without jumping to other pages_jquery

WBOY
WBOYOriginal
2016-05-16 16:34:161196browse

Mainly paste the code and understand the relevant logic by reading the code.

html code:

<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 code:

$("#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"); 
})

Plug-in code:

<%@ 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; 
} 
} 

}

The effect here is, enter the relevant text in the input box, click Submit, and the written text will be automatically displayed below without jumping to other pages.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn