首页 > 代码库 > ASP.NET Web 前台Ajax传递JSON

ASP.NET Web 前台Ajax传递JSON

2024-08-31 18:46:45   222人阅读

     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 =http://www.mamicode.com/ Request.Form.GetValues(i);                //遍历输出 ‘键‘ 和 ‘值‘                 for (int j = 0; j < value.Length; j++)                {                    Response.Write(name[i] + "=" + value[j] + "<br/>");                }            }        }

 

ASP.NET Web 前台Ajax传递JSON


联系
我们