jquery 请求返回的几种方式
页面代码
<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中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。
var json1 =val("(" + data + ")");
//因为后台声明的字符串,又序列化之后 所以在此处理两次 (PS:偷个懒 下同)
alert("性别:" + json1.sex + ",爱好:" + json1.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.
var j=js.Serialize(json);
context.Response.Write(j);
context.Response.End();
}
}
4.带序列化的json 前台自动解析: 第四种返回序列化的json对象
前台:
<script>
//第一种返回json字符
$(document).ready(function () {
$("#btnrq").click(function () {
$.ajax({
type: "post",
url: "Result.ashx",
data: { "name": "li" },
dataType: "json",
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.
var j=js.Serialize(json);
context.Response.Write(j);
context.Response.End();
}
}
jquery 请求返回的几种方式的更多相关文章
- 通过XMLHttpRequest和jQuery实现ajax的几种方式
AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpR ...
- jquery.validate+jquery.form提交的三种方式
原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...
- jQuery 实现图片放大两种方式
jQuery 实现图片放大两种方式 一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...
- Android请求服务器的两种方式--post, get的区别
android中用get和post方式向服务器提交请求_疯狂之桥_新浪博客http://blog.sina.com.cn/s/blog_a46817ff01017yxt.html Android提交数 ...
- Ajax请求数据的两种方式
ajax 请求数据的两种方法,有需要的朋友可以参考下. 实现ajax 异步访问网络的方法有两个.第一个是原始的方法,第二个是利用jquery包的 原始的方法不用引入jquery包,只需在html中编写 ...
- jQuery编写组件的几种方式
原文链接:https://w.cnblogs.com/xiao-xi/p/8572471.html 三种方式: 1.通过$.extend()来扩展jQuery 2.通过$.fn 向jQuery添加新的 ...
- jQuery绑定事件的四种方式
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...
- 使用JQuery获取对象的几种方式
1.先讲讲JQuery的概念 JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队.其实 JQuery是一个JavaScript的类 ...
- struts2 添加请求后缀的3种方式
第一种方式在struts.xml文件中添加 <constant name="struts.action.extension" value="">&l ...
随机推荐
- js实现选中文字 分享功能
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- titlesplit
/** * Created by lkl on 2017/6/26. *///spark-shell --driver-class-path /home/hadoop/test/mysqljdbc.j ...
- [Python] 04 - os & sys module
相当实用的一些API: Ref: https://docs.python.org/3/library/os.html from os import listdir from os.path impor ...
- 【class2src】Decompiler
方法源自:https://stackoverflow.com/questions/272535/how-do-i-decompile-java-class-files 功能:给定一个.class文件, ...
- 一个表中的id有多个记录,把所有这个id的记录查出来,并显示共有多少条记录数
一个表中的id有多个记录,把所有这个id的记录查出来,并显示共有多少条记录数 select id ,Count(*) from table_name group by id having count( ...
- windows 2008 r2 不能启用网络发现
在win2008 R2里面,不能启用网络发现,查询资料,得知需开启一下三个服务: Function Discovery Resource Publication SSDP Discovery UPnP ...
- Django之ORM那些相关操作
一般操作 看专业的官网文档,做专业的程序员! 必知必会13条 <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 ...
- Java 文件读写操作
1[1]按字节读写,一次只读取一个字节,效率比较低 package bk1; import java.io.File; import java.io.FileInputStream; import j ...
- poj1094 Sorting It All Out【floyd】【传递闭包】【拓扑序】
Sorting It All Out Time Limit: 1000MS Memory Limit: 10000K Total Submissions:39731 Accepted: 139 ...
- ES6 import
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...