zoukankan      html  css  js  c++  java
  • C# Ajax 返回json数据--前后台交互

    本人实习生一枚,遇到这个问题,网上找的试了试基本不可以,自己搞了一下。可以供新手参考,大神如有指点,请不吝赐教。

    版权声明:本文为博主原创文章,未经博主允许不得转载。


    前台JavaScript代码:

     1     <script>
     2         function checkLogin() {
     3             var name = $("#name").val();
     4             var passward = $("#password").val();
     5             console.log(name);
     6             console.log(passward);
     7             $.ajax({
     8                 url: 'index.aspx?method=login',
     9                 type: 'GET',
    10                 data: { "name": name, "passward": passward },
    11                 dataType: 'json',
    12                 success: function (dataInfo) {
    13                     if (dataInfo.status) {
    14                         console.log(dataInfo.data);
    15                         //前台接收到的数据中data是字符串,需要转换为JSON对象
    16                         var jsondata = JSON.parse(dataInfo.data);
    17                         alert("登陆成功,用户名是:"+jsondata.name+"   性别是:"+jsondata.sex+"   年龄是:"+jsondata.age);
    18                     } else {
    19                         alert("登陆失败");
    20                     }
    21                 },
    22                 async: false
    23             });
    24 
    25         }
    26     </script>

    当然了数据获取成功之后,怎么处理自己写就好了,这里只是示范一下。

    前台HTML代码:

    1     <form id="form1" runat="server">
    2     <div>
    3     <input id="name" type="text" />
    4     <input id="password" type="password" />
    5     <button onclick="checkLogin()" value="">提交</button>
    6     </div>
    7     </form>

    后台CS代码:

     1 using System;
     2 using System.Collections.Generic;
     3 using System.Linq;
     4 using System.Web;
     5 using System.Web.UI;
     6 using System.Web.UI.WebControls;
     7 using Newtonsoft.Json;
     8 using System.Runtime.Serialization;
     9 
    10 namespace WebTest
    11 {
    12     public partial class index : System.Web.UI.Page
    13     {
    14         protected void Page_Load(object sender, EventArgs e)
    15         {
    16             string method = Request.QueryString["method"];
    17             string name = Request.QueryString["name"];
    18             string passward = Request.QueryString["passward"];
    19             if (!string.IsNullOrEmpty(method))
    20             {
    21                 if (method == "login")
    22                 {
    23                     GetLogin(name, passward);
    24                 }
    25             }
    26 
    27         }
    28         private void GetLogin(string name, string passward)
    29         {
    30             
    31             CommonModel msg = new CommonModel();
    32             //这里有没有登陆成功可以连接数据库判断
    33             if (name == "admin" && passward == "admin")
    34             {
    35                 //这里是可以从数据库获取出来的登陆用户的信息
    36                 var jsonData = "{ "name":"管理员", "sex":"男", "age":"20"}";
    37 
    38                 msg.status = true;
    39                 msg.msg = "登陆成功";
    40                 msg.data = jsonData;
    41             }
    42             else
    43             {
    44                 msg.status = false;
    45                 msg.msg = "失败";
    46             }
    47             object JSONObj = JsonConvert.SerializeObject(msg);
    48             Response.Write(JSONObj);
    49             //一定要加,不然前端接收失败
    50             Response.End();
    51         }
    52     }
    53     class CommonModel
    54     {
    55         //状态
    56         private bool _statues;
    57 
    58         public bool status
    59         {
    60             get { return _statues; }
    61             set { _statues = value; }
    62         }
    63         //消息
    64         private string _msg;
    65 
    66         public string msg
    67         {
    68             get { return _msg; }
    69             set { _msg = value; }
    70         }
    71         //数据
    72         private object _data;
    73 
    74         public object data
    75         {
    76             get { return _data; }
    77             set { _data = value; }
    78         }
    79     }
    80 }

    效果图

  • 相关阅读:
    windows定时任务schtasks命令详细解
    TCP/IP 详解7 Ping指令
    Vue JSX、自定义 v-model
    DOM 元素的循环遍历
    关于 Blob
    Vue.nextTick 的应用解析
    弹窗组件及其回调函数
    krry-transfer ⏤ 基于 element 的升级版穿梭框组件发布到 npm 啦
    防抖与节流 & 若每个请求必须发送,如何平滑地获取最后一个接口返回的数据
    Java 单文件、多文件上传 / 实现上传进度条
  • 原文地址:https://www.cnblogs.com/jellydong/p/6932663.html
Copyright © 2011-2022 走看看