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 }

效果图:

时间: 2024-12-07 14:24:52

C# Ajax 返回json数据--前后台交互的相关文章

ajax返回json数据

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Ajax json test</title> <script language="

jquery实现ajax,返回json数据

jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback是回调函数,而type是返回数据的类型.type有xml,html,json,text等. 首先,页面引用jquery.js 在页面写ajax处理的js函数 1 2 3 4 5 6 7 8 9 10 11 12 13 function initMeeting() {             $.ge

ajax 返回json数据操作

例子: 1 $.ajax({ 2 url: "<?=Url::toRoute('add-all-staff')?>", 3 type: 'get', 4 dataType: 'json', 5 success: function (data) { 6 if (data) { 7 var Element = $(".staff_names"); 8 var user_ids = []; 9 10 for (var key in data) { 11 Ele

Jquery,ajax返回json数据后呈现到html页面的$.post方式。

1 <div id="anwser1" style="display:none"> 2 <div id="question"> 3 <p id="p1"></p> 4 5 </div> 6 <div id="chose"> 7 <div id="A" class="xuanze1">&

调用AJAX返回JSON、XML数据类型

1.调用AJAX返回JSON数据 用下拉列表显示Nation表民族名称 主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

ON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教程. XHTML  <ul id="userlist">    <li><a href="#" rel="1">张三</a></li>    <li><a href=&quo

用ajax获取后台数据,返回json数据,怎么在前台使用?

用ajax获取后台数据,返回json数据,怎么在前台使用呢? 后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == "SearchCustomer")                 {                     int ID;                     if (Int32.TryParse(CustomerID, out ID))                     {    

如何在Crystal Portlet中正确返回JSON数据给AJAX请求?

当Crystal Portlet中需要采用Ajax请求,并让后台返回Json数据时,如何才能正确.方便的返回Json数据呢? 以下两种方法均可: 方法一:Ajax请求时,采用RenderURL,对应Portlet类中采用ajax(data)方法返回Java对象即可: 方法二:Ajax请求时,采用ResourceURL,对应Portlet类中采用ajax(data,response)方法将Java对象直接输出到Response流中:(推荐使用此方法) 分步指南 方法一: Ajax请求时,url采用

jquery序列化from表单使用ajax提交返回json数据(使用struts2注解result type = json)

1.action类引入struts2的"json-default"拦截器栈 @ParentPackage("json-default") //示例 @ParentPackage(WapBaseAction.WAP_PACKAGE) //WAP_PACKAGE继承了json-default @Namespace("/") public class ModifyResumeAction extends WapBaseAction {... [emai