Content-Type: application/json
这样，后端就能够正确识别请求携带的JSON对象，并能正确解析其中的数据。
后端：我们假定使用的是java语言
前端：毫无疑问是js
java语言：是一种强类型的语言，必须定义类型，然后生成实例；而js却不是，虽然它也是面向对象的，但是它并没有先定义类这一种概念（但是js也有类型），它是基于原型的一种模式，和java完全不同。很显然，二者的原理，机制，语法并不能兼容。二者产生的对象并不能被对方解读。再来看网络传输，通常就是http/tcp协议喽，使用的其实是请求-响应，再说白了即使字符串，不论后台传来的是什么类型的数据，也不论前台传回的什么类型的数据，网络层统统当作字符串处理，它也没有办法来解析类型啊！说到这里，前后台传数据也就只能用字符串了，那也就意味着它们各自都要完成一个转换过程，把要发送的转换成字符串，把要收到的字符串解析成自己的对象。因为传输的字符串会涉及前后台双方的解析和处理，所以双方都必须认识或者知道字符串该怎么转，也就是说，最好能有一种通用的规则来编辑，转换字符串，这个标准或者协议就是JSON，JSON就是用来交换数据的，是一种string，一种独立于平台的数据格式。
这样一来，前台就需要把自己的数据类型转成JSON，然后发给后台，后台在用JSON来解析数据，转换成自己的类型。后台传前台一样。那么，怎么把自己的数据转成JSON呢？
`JSON`对象可以通过JavaScript存取属性！JSON对象封装成JSON字符串经常用于前后台传输数据！
如果在前端使用，那么JSON对象可以通过 对象.属性名 来调用，如果是json字符串，那么只是字符串了！
在数据传输过程中，JSON是以文本、即字符串的形式传递的，而JavaScript *** 作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。
JSON字符串：var str = '{ name: 'xmt', sex: 'woman' }'；
JSON对象： var str = { name: 'xmt', sex: 'woman' }；
JSON字符串转化为JSON对象：var obj = JSON.parse(str) ；
JSON对象转化为JSON字符串：var str = JSON.stringify(obj)；
首先采用jquery内部封装好的方法是比较简单的，我们只需做的就是修改里面的一些配置：以下代码是对$.ajax()的解析：
$.ajax({
type: "POST", //提交方式
contentType: "application/jsoncharset=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/jsoncharset=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/jsoncharset=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/jsoncharset=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/jsoncharset=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 + "'}"
}
}
}
所得的效果为：
第一个和第二个按钮点击后效果为：
第三个按钮点击后效果为：
所以我的初步结论为：后台的重构函数是不成功的，如果有的重构参数的话，只会执行带参数的，而不会执行那个不带参数的。现在还不是太明白为什么会这样，所以希望明白原理的分享一下自己的观点。当然这只是个人观点，如若有误，望请指正。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）