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

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

 1     <form id="form1" action="#">

 2         <p>评论:</p>

 3        <p> 姓名<input type="text"  name="username" id="username" class="easyui-validatebox" required="true"  missingmessage="请输入用户名"  /></p>

 4         内容:<textarea name="content" id="content" rows="2"  cols="20" class="easyui-validatebox" required="true" missingmessage="请输入内容"   ></textarea>

 5        <p><input type="button" id="send"  value="提交"/></p> 

 6     

 7     </form>

 8     <div class="comment">已有评论:</div>

 9     <div id="resText">

10     

11     </div>
前端页面代码

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

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

 1     public void ProcessRequest(HttpContext context)

 2         {

 3             context.Response.ContentType = "text/html";

 4             string username = context.Request.Form["username"];

 5             string content = context.Request.Form["content"];

 6             if (username != null && content != null)

 7             {

 8                 person p = new person();

 9                 p.username = username;

10                 p.content = content;

11                 JavaScriptSerializer jss = new JavaScriptSerializer();

12               string message=  jss.Serialize(p);

13               context.Response.Write(message);

14                 

15             }

16 

17            

18         }

19 

20         public bool IsReusable

21         {

22             get

23             {

24                 return false;

25             }

26         }

27     }

28 }

29 /// <summary>

30 /// 构造person类用于存放数据

31 /// </summary>

32 public class person

33 {

34     public string username { get; set; }

35     public string content{get;set;}

36 }
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);

                        }

                        )

                }

            }

            );



        });

  

 

你可能感兴趣的:(asp.net)