如何使用ajax将json传入后台数据

 我来答
aaakkk118微
2016-11-29 · 超过229用户采纳过TA的回答
知道小有建树答主
回答量:288
采纳率:0%
帮助的人:375万
展开全部
首先采用jquery内部封装好的方法是比较简单的,我们只需做的就是修改里面的一些配置:

以下代码是对$.ajax()的解析:
$.ajax({
type: "POST", //提交方式
contentType: "application/json; charset=utf-8", //内容类型
dataType: "json", //类型
url: "前台地址/后台方法", //提交的页面,方法名
data: "parameter", //参数,如果没有,可以为null
success: function (data) { //如果执行成功,那么执行此方法
alert(data.d); //用data.d来获取后台传过来的json语句,或者是单纯的语句
},
error: function (err) { //如果执行不成功,那么执行此方法
alert("err:" + err);
}
});

当然我初次学习的时候,看到这些也是有些茫然的,因为不知道到如何才能将其用到自己的程序里面,所以就写了一个小的检测网页来测试一下,如果你测试的时候没有达到你想要的结果,那么希望你回头看一下,前台是否写的有问题,或者是参考一下下文中的注意事项吧。

前台代码 :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="number3.aspx.cs" Inherits="ajax1.number3" %>
<!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">
<head runat="server">
<title>测试ajax</title>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function testAjax() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "number3.aspx/GetJson",//传入后台的地址/方法
data: "{'RID':'123'}",//参数,这里是一个json语句
success: function (data) {
var result = data.d;
alert(result);
},
error: function (err) {
alert("err:" + err);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button >用button测试ajax</button>
<input type="button" value="testAjax" />
</div>
</form>
</body>
</html>

后台代码:
using System;
using System.Web.Services;
namespace ajax1
{
public partial class number3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetJson(string RID)
{
return "{'ID':'" + RID + "'}";
}
}
}

后台代码中以黄色为背景的就是我们要注意的地方:

1.using System.Web.Services;对应下面的[WebMethod]这个一定要加上的。

2.后台写的方法一定是公共静态的即一定是public static开头的。

3.参数一定是前台的data所传参数的键

前台中要注意的地方:

1.大家应该会注意到,前台我用的是两个button来测试,但是第一个<button>是不行的,页面会刷新一下,其实这都是<form
id="form1"
runat="server">这行代码的问题,<button>标签会提交本页面的内容,从而导致异步刷新失败。所以建议大家不要用<button>标签。但是如果不得不用的话,解决办法还是有的,目前我知道的只有两个:

  ①:将<form id="form1"
runat="server">代码去掉,当然如果本页面有要提交的内容就会很麻烦了

  ②:将<button onclick="aaa();return
false;">用button测试ajax</button>代码改为:<button
onclick="aaa();return false;">用button测试ajax</button>

2。前台的测试结果是:

那么我们如何来只获取json后面的值,而不是整个json语句呢,我们可以将json语句对象化,然后根据键来取得对应的值:前台的testAjax()的方法改为:
function testAjax() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "number3.aspx/GetJson",
data: "{'RID':'123'}",
success: function (data) {
var result = eval("(" + data.d + ")");//这句话是将json语句对象化
alert(result.ID);
},
error: function (err) {
alert("err:" + err);
}
});
}

此时结果为:

以上就是初步学习json当时遇到的问题所留下的经验。同时我想验证一下是否能够在后台重载方法来实现根据前台的data是否有参数来判断要执行的方法,所以我将代码改动了一下:
改动后的前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="number3.aspx.cs" Inherits="ajax1.number3" %>
<!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">
<head runat="server">
<title>测试ajax</title>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function testAjax() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "number3.aspx/GetJson",
data: "{'RID':'123'}",
success: function (data) {
var result = eval("(" + data.d + ")");
alert(result.ID);
},
error: function (err) {
alert("err:" + err);
}
});
}
function aaa() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "number3.aspx/GetJson",
success: function (data) {
alert(data.d);
},
error: function (err) {
alert("err:" + err);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button >用button测试ajax</button>
<input type="button" value="testAjax" />
<input type="button" value="aaa" />
</div>
</form>
</body>
</html>
改动后的后台代码
using System;
using System.Web.Services;
namespace ajax1
{
public partial class number3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetJson()
{
return "hello ajax";
}
[WebMethod]
public static string GetJson(string RID)
{
return "{'ID':'" + RID + "'}";
}
}
}

所得的效果为:

第一个和第二个按钮点击后效果为:

第三个按钮点击后效果为:

所以我的初步结论为:后台的重构函数是不成功的,如果有的重构参数的话,只会执行带参数的,而不会执行那个不带参数的。现在还不是太明白为什么会这样,所以希望明白原理的分享一下自己的观点。当然这只是个人观点,如若有误,望请指正。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友ea2724c
2016-11-29 · TA获得超过263个赞
知道小有建树答主
回答量:322
采纳率:50%
帮助的人:148万
展开全部
//基础的ajax配置信息
$.ajax({
       url: "deleteOne.action",    //请求的url地址
       dataType: "json",   //返回格式为json
       async: true, //请求是否异步,默认为异步,这也是ajax重要特性
       data: { "id": id },    //参数值
       type: "get",   //请求方式
       beforeSend: function() {
           //请求前的处理
       },
       success: function(data) {
           //请求成功时处理
           console.info(data);
           if(data==true||data=="true"){
            ; 
            getList();           
           }          
       },
       complete: function() {
           //请求完成的处理
       },
       error: function() {
           //请求出错处理
       }
    });

json格式其实就是字符串而已,后台是把这个字符串当作json格式解析

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式