Jquery 使用Ajax获取后台返回的Json数据后,页面处理
<!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>
<title></title>
<script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url: 'jsondata.ashx',
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction, //错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
$("#list").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$("#list").html(''); //eval将字符串转成对象数组
//var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };
//json = eval(json);
//alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email); var json = eval(tt); //数组
$.each(json, function (index, item) {
//循环获取数据
var name = json[index].Name;
var idnumber = json[index].IdNumber;
var sex = json[index].Sex;
$("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>");
});
}
});
</script>
</head>
<body>
<ul id="list">
</ul>
</body>
</html>
<%@ WebHandler Language="C#" Class="jsondata" %> using System;
using System.Web;
using System.Web.Script.Serialization;
using System.IO;
using System.Text;
using System.Collections.Generic;
using Newtonsoft.Json;
using System.Data; public class jsondata : IHttpHandler { public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string JsonStr = JsonConvert.SerializeObject(CreateDT());
context.Response.Write(JsonStr);
context.Response.End();
} #region 创建测试数据源
//创建DataTable
protected DataTable CreateDT()
{
DataTable tblDatas = new DataTable("Datas");
//序号列
//tblDatas.Columns.Add("ID", Type.GetType("System.Int32"));
//tblDatas.Columns[0].AutoIncrement = true;
//tblDatas.Columns[0].AutoIncrementSeed = 1;
//tblDatas.Columns[0].AutoIncrementStep = 1;
//数据列
tblDatas.Columns.Add("IdNumber", Type.GetType("System.String"));
tblDatas.Columns.Add("Name", Type.GetType("System.String"));
tblDatas.Columns.Add("BirthDate", Type.GetType("System.String"));
tblDatas.Columns.Add("Sex", Type.GetType("System.String"));
tblDatas.Columns.Add("Wage", Type.GetType("System.Decimal"));
tblDatas.Columns.Add("Bonus", Type.GetType("System.Decimal"));
//统计列开始
tblDatas.Columns.Add("NeedPay", Type.GetType("System.String"), "Wage+Bonus");
//统计列结束
tblDatas.Columns.Add("Address", Type.GetType("System.String"));
tblDatas.Columns.Add("PostCode", Type.GetType("System.String"));
//设置身份证号码为主键
tblDatas.PrimaryKey = new DataColumn[] { tblDatas.Columns["IdNumber"] }; tblDatas.Rows.Add(new object[] { "43100000000000", "张三", "1982", "0", 3000, 1000, null, "深圳市", "518000" });
tblDatas.Rows.Add(new object[] { "43100000000001", "李四", "1983", "1", 3500, 1200, null, "深圳市", "518000" });
tblDatas.Rows.Add(new object[] { "43100000000002", "王五", "1984", "1", 4000, 1300, null, "深圳市", "518000" });
tblDatas.Rows.Add(new object[] { "43100000000003", "赵六", "1985", "0", 5000, 1400, null, "深圳市", "518000" });
tblDatas.Rows.Add(new object[] { "43100000000004", "牛七", "1986", "1", 6000, 1500, null, "深圳市", "518000" });
return tblDatas;
}
#endregion public bool IsReusable
{
get
{
return false;
}
}
}
<!--
<script type="text/javascript">
$(function () {
$.ajax({
url: 'jsondata.ashx',
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction, //错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
$("#list").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$("#list").html(''); //eval将字符串转成对象数组
//var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };
//json = eval(json);
//alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email); var json = eval(tt); //数组
$.each(json, function (index, item) {
//循环获取数据
var Key = json[index].key;
var Info = json[index].info;
// var idnumber = json[index].IdNumber;
// var sex = json[index].Sex;
$("#list").html($("#list").html() + "<br>" + Key + "----" + Info.name); //+ " - " + idnumber + " - " + sex + "<br/>");
});
}
});
</script>
-->
<%@ WebHandler Language="C#" Class="jsondata" %> using System;
using System.Web;
using System.Web.Script.Serialization;
using System.IO;
using System.Text;
using System.Collections;
using System.Collections.Generic;
using System.Data; public class jsondata : IHttpHandler { public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Cache.SetNoStore();
string data = "[{\"key\":\"1\",\"info\":{\"name\":\"222\",\"age\":\"333\",\"sex\":\"444\"}},{\"key\":\"2\",\"info\":{\"name\":\"999\",\"age\":\"000\",\"sex\":\"111\"}}]";
context.Response.Write(new JavaScriptSerializer().Serialize(data));
} public bool IsReusable
{
get
{
return false;
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2013.aspx.cs" Inherits="Test2013" %> <!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></title>
<script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GetPara(o) {
var sortid = $(o).val();
$.ajax({
url: 'GetPara.ashx?type=get&sortid=' + sortid,
type: 'GET',
dataType: 'json',
timeout: 3000,
cache: false,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction, //错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
$("#list").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$("#list").html('');
var json = eval(tt); //数组
$.each(json, function (index, item) {
//循环获取数据
var Id = json[index].id;
var Name = json[index].name;
$("#list").html($("#list").html() + "<br>" + Name + "<input type='text' id='" + Id + "' /><br/>");
});
}
}; function SavePara() {
var parameter = {};
$("#list input:text").each(function () {
var key = $(this).attr("id");
var value = $(this).val();
parameter[key] = value;
}); $.ajax({
url: 'GetPara.ashx?type=save',
type: 'POST',
dataType: 'json',
data: parameter,
timeout: 3000,
cache: false,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction, //错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
}
function erryFunction() {
}
function succFunction(tt) {
}
};
</script> </head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddl1" runat="server" onchange="GetPara(this)">
</asp:DropDownList>
<ul id="list"></ul> <input type="button" value="保存数据" onclick="SavePara()" />
</div>
</form>
</body>
</html>
<%@ WebHandler Language="C#" Class="GetPara" %> using System;
using System.Web;
using System.Data;
using System.Collections.Generic;
using System.Web.Script.Serialization; public class GetPara : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string SortId = context.Request["sortid"];
string Type = context.Request["type"];
if (Type=="get")
{
if (!string.IsNullOrEmpty(SortId))
{
DataTable dt = MSCL.SqlHelper.GetDataTable("select * from PR_PRODUCTPARAS where sortid='" + SortId + "' ");
List<Paras> list = new List<Paras>();
for (int i = 0; i < dt.Rows.Count; i++)
{
Paras a = new Paras();
a.id = dt.Rows[i]["PARAID"].ToString();
a.name = dt.Rows[i]["PARANAME"].ToString();
list.Add(a);
}
context.Response.Write(new JavaScriptSerializer().Serialize(list));
}
}
else if (Type == "save")
{
//反序列化json
System.IO.Stream stream = context.Request.InputStream;
System.IO.StreamReader sr = new System.IO.StreamReader(stream, System.Text.Encoding.GetEncoding("UTF-8"));
string sJson = sr.ReadToEnd();
if (sJson.Contains("&"))
{
string[] sArr = sJson.Split('&');
for (int i = 0; i < sArr.Length; i++)
{
string[] sArr1 = sArr[i].Split('=');
object id = sArr1[0];
object value = sArr1[1];
}
}
}
else
{ }
} public bool IsReusable {
get {
return false;
}
} public struct Paras
{
public string id;
public string name;
}
}
Jquery 使用Ajax获取后台返回的Json数据后,页面处理的更多相关文章
- ajax 请求 对json传的处理 Jquery 使用Ajax获取后台返回的Json数据后,页面处理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转】Jquery 使用Ajax获取后台返回的Json数据后,页面处理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ajax获取后台传递的json数据
最近在使用JQuery的ajax方法时,需要返回的数据为json数据,在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据.在$.ajax方法中应该是如何来处理的,简 ...
- JS获取后台返回的JSON数据
问题:通过$.get从后台获取了一段json串{"id":"1","name":"ww"},然后要拿到这里面的id和na ...
- Ajax处理后台返回的Json数据
// 处理后台传来的Json字符串装换成Json对象 var dataJson = JSON.parse(data); // 此时可以从Json对象中取值 if(dataJson.result == ...
- 【转】Jquery ajax方法解析返回的json数据
转自http://blog.csdn.net/haiqiao_2010/article/details/12653555 最近在用jQuery的ajax方法传递接收json数据时发现一个问题,那就是返 ...
- 前台如何处理后台返回的json数据
后台返回的json数据格式: { "state": true, "data": { "id": 0, "name": & ...
- jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
- Struts1.x下使用jquery的Ajax获取后台数据
jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法. 前台页面: ...
随机推荐
- WEB跨域资源共享：Cross-origin Resource Sharing(CORS)
跨域资源共享(CORS):浏览器同源策略中的同源指协议+域名+端口三者完全一致,其中任何一个不同即为跨域 1. 浏览器同源政策是隔离潜在恶意文件的安全机制,限制信息传递和使用的边界,不是信息的保密机制 ...
- 结构体(struct)大小
结构体(struct)大小 本文参考链接:C语言结构体(struct)常见使用方法,链接中的实例代码经实践有几处不准确,本文在引用时已做更改 注意:在结构体定义时不能申请空间(除非是结构体变量),不可 ...
- 201521123002《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 1.提交函数实 ...
- 201521123067 《Java程序设计》第8周学习总结
201521123067 <Java程序设计>第8周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 Q1.List中指定 ...
- 201521123033《Java程序设计》第2周学习总结
1. 本周学习总结 answer:(1)学会用码云存储代码,并下载代码. (2)学会在java中使用函数,使代码更精炼. 2. 书面作业 Q1.使用Eclipse关联jdk源代码,并查看String对 ...
- 201521123006 《Java程序设计》 第2周学习总结
1. 本周学习总结 本周进一步学习了java,了解了java编程中一些特定的用法,比如:在编译程序时可以使用import来减少输入包名称.本周还学会了使用枚举类(enum Choice{fab,sor ...
- 201521123072《Java程序设计》第1周学习总结
201521123072<Java程序设计>第1周学习总结 标签(空格分隔): JAVA学习 1,本周学习总结 了解了JDK,JRE,JVM,学会使用cmd中一些简单的命令 了解了Java ...
- 201521123052 《Java程序设计》 第14周学习总结
1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) - ...
- Java 删除项目中的.svn信息
有时候拿过来的war包或者源代码中有.svn信息,我们想删除掉它,然后再上传到自己的svn中. 我这里是自己写的java代码实现的. package com.bstek.transit; import ...
- JPA关系映射之one-to-one
一对一关联有两种实现方式:一种是共享的主键关联,另一种是一对一的外键关联 1.共享的主键关联:让两个对象具有共同的主键值,以表明他们之间的一一对应关系. Person.java类 public cla ...