您所在的位置:小祥子 » 编程 » JavaScript » 正文

asp.net 异步提交到一般处理程序,并返回json字符串

时间:2015-04-21 编辑:安以寞 来源:本站整理

最经自己学到jQuery easy-ui 这一块,便自己动手做了一个关于$.post()异步提交的例子,特地记录下来来加深自己对异步提交的理解,花开两朵,各表一枝,下面是我写的例子,大神勿喷

     <form id="form1" action="#">
         <p>评论:</p>
        <p> 姓名<input type="text"  name="username" id="username" class="easyui-validatebox" required="true"  missingmessage="请输入用户名"  /></p>
         内容:<textarea name="content" id="content" rows="2"  cols="20" class="easyui-validatebox" required="true" missingmessage="请输入内容"   ></textarea>
        <p><input type="button" id="send"  value="提交"/></p> 
     
     </form>
     <div class="comment">已有评论:</div>
     <div id="resText">
     
     </div>
前端页面代码

后端是通过一般处理程序写的有、由于要把前端传来的数据序列化,因此,我构建了一个person对象,用于存放前端传过来的数据,然后通过 c#中 JavaScriptSerializer类把person对象序列化成为JSon字符串,传到前台

下面是一般处理程序的代码:

     public void ProcessRequest(HttpContext context)
         {
             context.Response.ContentType = "text/html";
             string username = context.Request.Form["username"];
             string content = context.Request.Form["content"];
             if (username != null && content != null)
             {
                 person p = new person();
                 p.username = username;
                 p.content = content;
                 JavaScriptSerializer jss = new JavaScriptSerializer();
               string message=  jss.Serialize(p);
               context.Response.Write(message);
                 
             }
 
            
         }
 
         public bool IsReusable
         {
             get
             {
                 return false;
             }
         }
     }
 }
 /// <summary>
 /// 构造person类用于存放数据
 /// </summary>
 public class person
 {
     public string username { get; set; }
     public string content{get;set;}
 }
Handler1

由于要把数据加载到前端并显示所以在前端用$.parseJSON(data)解析json对象,并把他们写到<div id="resText">里面下面是jquery代码

 $(function () {


            $("#send").click(function () {
                var username = $("#username").val();
                var content = $("#content").val();
                if (username == "" || content == "") {
                    $.messager.alert("提示", "请填写用户名或评论!", "info");
                }
                else {
                    $.post("Handler1.ashx",
                        {
                            username: $("#username").val(),
                            content: $("#content").val()
                        }, function (data, textStatus) {
                            var person = $.parseJSON(data)
                            $("#resText").html(person.username + "<br/>" + person.content);
                        }
                        )
                }
            }
            );

        });