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 ...
随机推荐
- java获取视频缩略图
近期由于在做一个关于视频播放的项目,需要使用程序自动获取视频文件的缩略图,特写此文供其他人参考,有不清楚之楚可以给我留言. 1.使用工具:ffmpeg, 官网下载地址:http://ffmpeg.or ...
- Android异步处理系列文章四篇之三
Android异步处理一:使用Thread+Handler实现非UI线程更新UI界面Android异步处理二:使用AsyncTask异步更新UI界面Android异步处理三:Handler+Loope ...
- [DQN] What is Deep Reinforcement Learning
已经成为DL中专门的一派,高大上的样子 Intro: MIT 6.S191 Lecture 6: Deep Reinforcement Learning Course: CS 294: Deep Re ...
- [Algorithm] Polynomial and FFT
排序:nlogn 二分查找:logn <-- 利用单调性,查n次,每次logn Multiply the following pairs of polynomials using at most ...
- [JS] Topic - hijack this by "apply" and "call"
Ref: 详解js中的apply与call的用法 call 和 apply二者的作用完全一样,只是接受参数的方式不太一样. 参数形式: Function.apply(obj,args) call方法与 ...
- Hook lua库函数时遇到的问题
最近在为distri.lua实现一个lua调试系统,有一个简单的需求,lua导入一个文件的时候,将这个文件的文件名记录下来, 以方便调试器在设置断点的时候判断是否一个合法的文件. lua导入文件是通过 ...
- 10.13 Django随笔
2018-10-13 14:20:59 越努力,越幸运! 永远不要高估自己! Django的渲染是在render()时候渲染的,然后把字符串传给浏览器 Django请求流程, 跨域 参考链接: htt ...
- C - Building Fence
Long long ago, there is a famous farmer named John. He owns a big farm and many cows. There are two ...
- DB2 Version 10.5 补丁下载
DB2 Version 10.5 for Linux, UNIX, and Windows fix pack summary https://www.ibm.com/support/knowledge ...
- 解决webstorm拉取Vue项目时卡顿,及内存爆满问题
最近在拉取Vue项目时总是会出现webstorm内存瞬间爆满,导致webstorm卡死,而且,有时在下载完node_modues后webstorm一直处于updating中,为此在网上找了很多方法结果 ...