码迷,mamicode.com
首页 > Web开发 > 详细

jquery 请求返回的几种方式

时间:2017-06-18 20:45:40      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:result   rest   java   func   nat   ashx   str   type   代码   

页面代码

<form id="form1" runat="server">
<div>
<p> Ajax请求ashx返回json数据的常见问题 </p>
<button type="button" id="btnrq">点击请求数据</button>
</div>
<div id="iddiv"></div>
</form>

1   请求text数据,在success事件中手动解析    第一种返回json字符  

前台:

<script>
//第一种返回json字符
$(document).ready(function () {
$("#btnrq").click(function () {
$.ajax({
type: "post",
url: "Result.ashx",
data: { "name": "li" },
dataType: "text",
success: function (data) {
var json = eval(‘(‘ + data + ‘)‘)//为什么 加eval函数,本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。
alert("性别:" + json.sex + ",爱好:" + json.interest);
// $("#iddiv").text(json.sex);
}
});

});
});
</script>

后台  :

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// context.Response.Write("Hello World");
request(context);
}
void request(HttpContext context) {
var name = context.Request["name"];
if (name == "li") {
string json = "{\"sex\":\"男\",\"interest\":\"篮球\" }";
context.Response.Write(json);
context.Response.End();
}
}

2. 请求json数据,在success事件中手动解析    JQ自动解析   第二种返回json对象

前台:

<script>
//第一种返回json字符
$(document).ready(function () {
$("#btnrq").click(function () {
$.ajax({
type: "post",
url: "Result.ashx",
data: { "name": "li" },
dataType: "json",
success: function (data) {
var json = eval(‘(‘ + data + ‘)‘)//为什么 加eval函数,本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。 
alert("性别:" + json.sex + ",爱好:" + json.interest);
// $("#iddiv").text(json.sex);
}
});

});
});
</script>

后台  :

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// context.Response.Write("Hello World");
request(context);
}
void request(HttpContext context) {
var name = context.Request["name"];
if (name == "li") {
string json = "{\"sex\":\"男\",\"interest\":\"篮球\" }";
context.Response.Write(json);
context.Response.End();
}
}

3.带序列化text数据,在success事件中手动解析    返回带序列化json对象

前台:

<script>
//第一种返回json字符
$(document).ready(function () {
$("#btnrq").click(function () {
$.ajax({
type: "post",
url: "Result.ashx",
data: { "name": "li" },

dataType: "text",
success: function (data) {
$("#iddiv").text(data);
var json = eval(‘(‘ + data + ‘)‘)//为什么 加eval函数,本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。

alert("性别:" + json.sex + ",爱好:" + json.interest);
// $("#iddiv").text(json.sex);
}

});

});
});
</script>

后台  :

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// context.Response.Write("Hello World");
request(context);
}
void request(HttpContext context) {
var name = context.Request["name"];
if (name == "li") {
string json = "{\"sex\":\"男\",\"interest\":\"篮球\" }";
JavaScriptSerializer js = new JavaScriptSerializer();   //   ASP.NET中的JSON序列化和反序列化还可以使用JavaScriptSerializer,在System.Web.Script.Serializatioin命名空间下,需引用System.Web.Extensions.dll.
js.Serialize(json);
context.Response.Write(json);
context.Response.End();
}
}

4.带序列化的json 前台自动解析:  第四种返回序列化的json对象

前台:

<script>
//第一种返回json字符
$(document).ready(function () {

$("#btnrq").click(function () {
$.ajax({
type: "post",
url: "Result.ashx",
data: { "name": "li" },

dataType: "text",
success: function (data) {
$("#iddiv").text(data);
alert("性别:" + json.sex + ",爱好:" + json.interest);
}


});

});
});
</script>

后台  :

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// context.Response.Write("Hello World");
request(context);
}
void request(HttpContext context) {
var name = context.Request["name"];
if (name == "li") {
string json = "{\"sex\":\"男\",\"interest\":\"篮球\" }";
JavaScriptSerializer js = new JavaScriptSerializer();   //   ASP.NET中的JSON序列化和反序列化还可以使用JavaScriptSerializer,在System.Web.Script.Serializatioin命名空间下,需引用System.Web.Extensions.dll.
js.Serialize(json);
context.Response.Write(json);
context.Response.End();
}
}

 

jquery 请求返回的几种方式

标签:result   rest   java   func   nat   ashx   str   type   代码   

原文地址:http://www.cnblogs.com/dashanboke/p/7045082.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!