ASP.NET Web 前台Ajax传递JSON
Posted 郎中令
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ASP.NET Web 前台Ajax传递JSON相关的知识，希望对你有一定的参考价值。
Json 作为一种轻量级的数据交换格式，主要用于和服务器之间进行交换数据，其数据格式类似于 键值组合形式的数组。
在Web 中使用Ajax传递Json数据时候，就不得不先提一提Form表单，web前台界面中使用的控件默认是嵌在 form中的，而在form下使用asp：button控件，被html编译后默认类型为Submit，如此就先于Ajax一步提交了表单，导致Json数据无法正常传递到后台，合理的解决办法是 给Button 设置 OnClientClick="return false;" 让其不提交。
前台Post代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="JS/jquery-3.1.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btnSub").click(function () { $.ajax({ type: "post", contentType: "application/json; charset=utf-8", dataType: "json", url: "WebForm1.aspx/ReceiveJson", data: "{‘Name‘:‘郎中令‘,‘Age‘:‘200‘}", success: function (data) { var result = data.d; alert(result); }, error: function () { alert("發送失敗"); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="btnSub" runat="server" Text="Ajax" ClientIDMode="Static" OnClientClick="return false;"></asp:Button> </div> </form> </body> </html>
后台代码：前台返回的数据是后台处理的数据，如，后台只返回Hello 前台返回的数据也将是Hello
//參數名必須與前台JSon鍵名一致
//方法必须是是静态 static
[WebMethod] public static string ReceiveJson(string Name, string Age) { return "Name:" + Name + " " + "Age:" + Age; }
大致流程 前台发送请求---后台接受数据--分析处理+返回数据--前台接收
另外说说关于Form表单，提交方式为Post、Get ，两者区别
Post：默认情况下，如果设定了Action ，Google会在Network下找到传递的参数
Get：提交的参数会在导航栏中显示，故大数据/文件/隐私 不可传递
新建一HtmlPage1.html，如下post发送（）
<body> <form enctype="multipart/form-data" action="WebForm1.aspx" method="post"> <label for="txtname">账号：</label> <input type="text" id="txtname" name="username" /><br /> <input type="submit" value="提交"/> </form> </body>
然后在 WebForm1.aspx 的Page_Load 中接受Form表单提交的数据
protected void Page_Load(object sender, EventArgs e) { //取得表單中所有的鍵名 string[] name = Request.Form.AllKeys; for (int i = 0; i < name.Length; i++) { //取得表單中所有的值 string[] value = Request.Form.GetValues(i); //遍历输出 ‘键‘ 和 ‘值‘ for (int j = 0; j < value.Length; j++) { Response.Write(name[i] + "=" + value[j] + "<br/>"); } } }
以上是关于ASP.NET Web 前台Ajax传递JSON的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET MVC中如何以ajax的方式在View和Action中传递数据
如何使用 Ajax 和 ASP.NET WebMethod 传递 JSON 对象
asp.net利用Ajax和Jquery在前台向后台传参数并返回值