ASP.NETWeb前台Ajax传递JSON

时间:2017-01-11  |  来源:cnphp6

     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/>");
                }
            }
        }