添加引用Dll文件就可以使用了,很方便的。
/201101/tools/Newtonsoft.Json.Net20.rar
在jquery库中,getJSON其实是调用的:Query.get(url, data, callback,
“json”)
其中参数也是以k/v对格式发出。请求返回的可以看到:在服务端以Customer列表集合返回
现在来看一下事列:
件一个Common类

复制代码 代码如下:

根据提供的试卷题目(是一个干净的只有“数据”的HTML网页)生成一份多页的试卷,用户能执行翻页、具有答题时间限制,展示给用户的试卷中题目需要占用尽量少的空间(比如选择题中把两条较短的选项由两行合并到一行)、同一道题目不要跨页面显示以方便答题者,管理员能够改变试卷的样式(字体、颜色、行距、页面边距,像字处理软件一样……),题目之间可以插入一些说明性的文字(比如告知答题者作答的须知等等)。题目提干、选择题的选项、说明文字可以包含多媒体信息(文字、图片、列表、表格、视频等等……)。选择题选项数目不限、单选多选不限。翻页要有可订制的动画效果

复制代码 代码如下:

<html xmlns=”;
<head>
<title></title>
<script src=”Scripts/jquery-1.4.1.min.js”
type=”text/javascript”></script>
<script type=”text/javascript”>
var t;
var speed = 2;//图片切换速度
var nowlan=0;//图片开始时间
function changepic() {
var imglen = $(“div[name=’pic’]”).find(“div”).length;
$(“div[name=’pic’]”).find(“div”).hide();
$(“div[name=’pic’]”).find(“div”).eq(nowlan).show();
nowlan = nowlan+1 ==imglen ?0:nowlan + 1;
t = setTimeout(“changepic()”, speed * 1000);
}
onload = function () { changepic(); }
$(document).ready(function () {
//鼠标在图片上悬停让切换暂停
$(“div[name=’pic’]”).hover(function () { clearInterval(t); });
//鼠标离开图片切换继续
$(“div[name=’pic’]”).mouseleave(function () { changepic(); });
});
</script>
</head>
<body>
<div name=”pic” style=”float:left;
position:relative;overflow:hidden;width:300px;height:240px;” >
<div><img width=”300″ height=”240″ src=”Chrysanthemum.jpg”
alt=”1″/></div>
<div><img width=”300″ height=”240″ src=”Desert.jpg”
alt=”2″/></div>
<div><img width=”300″ height=”240″ src=”Hydrangeas.jpg”
alt=”3″/></div>
</div>
</body>
</html>

提供的试卷样板类似如下(Input):

public class Customer
{
public int Unid { get; set; }
public string CustomerName { get; set; }
public string Memo { get; set; }
public string Other { get; set; }
}

代码如下: html
xmlns=”” head title/title script
src=”Scripts/jquery-1.4.1.min.js” type=”text/javascript”/script script
type=”text/javas…

复制代码 代码如下:

在一般处理文件(ashx)中写一个如下方法

<ol id=”olThePaper”>
<div
class=”Desc”>选择题:说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。</div>
<div class=”Problem” id=”1″>
<li>1.你认为怎样的老师是好老师?</li>
<div class=”Choices”>
<label><input type=”radio” name=”prob1″ value=”A”
/>和学生平等相处,能全面满足学生各种需要</label>
<label><input type=”radio” name=”prob1″ value=”B”
/>所在教学班的成绩优于其他平行班</label>
<label><input type=”radio” name=”prob1″ value=”C”
/>严格管理学生、所带的班级班风良好</label>
<label><input type=”radio” name=”prob1″ value=”D”
/>父母般地关心学生的生活和情绪状态</label>
</div>
</div>
<div class=”Problem” id=”2″>
<li>2.一位有15年教龄的英语教师,教了多年高三,可谓学校的核心骨干。一次接受邀请到外校介绍教学经验,台下有老师发表了观点并问到几个英语教法发面的问题,一下子把她给卡住了。这是因为</li>
<div class=”Choices”>
<label><input type=”radio” name=”prob2″ value=”A”
/>她最近工作太累,注意力不够集中。</label>
<label><input type=”radio” name=”prob2″ value=”B”
/>提问老师的观点和她的有很大不同。</label>
<label><input type=”radio” name=”prob2″ value=”C”
/>由于长时间在教学一线拼搏,她对教学理论问题的关注度不高。</label>
<label><input type=”radio” name=”prob2″ value=”D”
/>对学科教学的归纳和思考少,一时加工不过来。</label>
</div>
</div>
<div class=”Problem” id=”3″>
<li>3.哪张图片最好看?</li>
<div class=”Choices”>
<label><input type=”radio” name=”prob3″ value=”A”
/>这一张<img src=”img1.png” height=”300px” width=”400px”
alt=”img1″/>好看。</label>
<label><input type=”radio” name=”prob3″ value=”B”
/>这一张<img src=”img2.png” height=”300px” width=”400px”
alt=”img2″/>好看。</label>
<label><input type=”radio” name=”prob3″ value=”C”
/>这一张<img src=”img3.png” height=”300px” width=”400px”
alt=”img3″/>好看。</label>
<label><input type=”radio” name=”prob3″ value=”D”
/>这一张<img src=”img4.png” height=”300px” width=”400px”
alt=”img4″/>好看。</label>
<label><input type=”radio” name=”prob3″ value=”E”
/>不知道。</label>
</div>
</div>
<div
class=”Desc”>填空题和选择题:一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。</div>
<div class=”Problem” id=”4″>
<li>4.床前明月光,<input type=”text” name=”prob4″
/></li>
</div>
<div class=”Problem” id=”5″>
<li>5.你认为怎样的老师是好老师?</li>
<div class=”Choices”>
<label><input type=”checkbox” name=”prob6″ value=”D”
/>和</label>
<label><input type=”checkbox” name=”prob6″ value=”A”
/>所</label>
<label><input type=”checkbox” name=”prob6″ value=”B”
/>严</label>
<label><input type=”checkbox” name=”prob6″ value=”C”
/>父</label>
<label><input type=”checkbox” name=”prob6″ value=”E”
/>和班的成绩班的成绩班的成绩班的成绩班的成绩</label>
<label><input type=”checkbox” name=”prob6″ value=”F”
/>所班的成绩班的成绩班的成绩</label>
<label><input type=”checkbox” name=”prob6″ value=”G”
/>严班的班的成绩班的成绩班的成绩班的成绩</label>
<label><input type=”checkbox” name=”prob6″ value=”H”
/>啊</label>
</div>
</div>
</ol>

复制代码 代码如下:

思路
面对这种需求该怎么办呢?使用JavaScript了,看来。后来决定用jQuery,Aptana作IDE(虽然jQuery支持库在Windows上死活装不上去,换了个OS就好了,奇怪),格式么就用CSS了。

Customer customer = new Customer
{ Unid=1,CustomerName=”宋江”,Memo=”天魁星”,Other=”黑三郎”};
string strJson =
Newtonsoft.Json.JsonConvert.SerializeObject(customer);
context.Response.Write(strJson);

具体步骤:

在前台Jquery中加载调用ashx代码
通过getJSON向ashx请求数据。返回的数据为JSON对象

导入试卷题目HTML
对所有选择题进行排版,把一行划分为四个位置,使选项尽量适应一个位置、两个位置或四个位置(也就是一行四项、一行两项或者一行一项的效果)
对所有题目进行分页
思路还是清晰的,但是由于浏览器众多,还是比较麻烦的,并且我是新手,没接触过jQuery之前……

复制代码 代码如下:

实现
页面文件(和例子不同,但是格式一样的)

$().ready(function() {
$.getJSON(“JqueryData2.ashx”, function(data) {
alert(data.Memo);
});
$.getJSON(“JqueryData2.ashx”, function(data) {
var tt = “”;
$.each(data, function(k, v) {
tt += k + “:” + v + “<br/>”;
})
$(“#disHows”).html(tt);
});
});

复制代码 代码如下:

(二)ashx文件,但返回的是实体集合

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“;
<html xmlns=”;
<head>
<title>No title…</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<script language=”JavaScript” src=”lib/jquery/jquery-1.4.2.js”
type=”text/javascript”></script>
<script language=”JavaScript”
src=”lib/countdown/jquery.countdown.pack.js”
type=”text/javascript”></script>
<script language=”JavaScript” src=”TestPaperProcessor.js”
type=”text/javascript”></script>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”divToolbar”>
<div id=”divPrev”>PrevPage</div>
<div id=”divNext”>NextPage</div>
<div id=”divPageInfo”>Loading the test…</div>
<div id=”divTimer”></div>
</div>
<form id=”formPaper” action=”demo.html” method=”post”
accept-charset=”utf-8″>
<ul>
<div class=”Display” id=”divLeft”>
left<!–the left page–>
</div>
<div class=”Display” id=”divRight”>
right<!–the right page–>
</div>
</ul>
<ol id=”olThePaper”>
<div
class=”Desc”>选择题:说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。说明文字。</div>
<div class=”Problem” id=”1″>
<li>1你认为怎样的老师是好老师?</li>
<div class=”Choices”>
<label>
<input type=”radio” name=”prob1″ value=”D”
/>和学生平等相处,能全面满足学生各种需要
</label>
<label>
<input type=”radio” name=”prob1″ value=”A”
/>所在教学班的成绩优于其他平行班
</label>
<label>
<input type=”radio” name=”prob1″ value=”B”
/>严格管理学生/所带的班级班风良好
</label>
<label>
<input type=”radio” name=”prob1″ value=”C”
/>父母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class=”Problem” id=”2″>
<li>2你认为怎样的老师是好老师?</li>
<div class=”Choices”>
<label>
<input type=”radio” name=”prob2″ value=”D”
/>和学生平jlsdjklsdf生各种需要
</label>
<label>
<input type=”radio” name=”prob2″ value=”A” />所
</label>
<label>
<input type=”radio” name=”prob2″ value=”B” />严格好
</label>
<label>
<input type=”radio” name=”prob2″ value=”C”
/>父母关心学生的生活和情绪状态
</label>
</div>
</div>
<div class=”Problem” id=”3″>
<li>3你认为怎样的老师是好老师?</li>
<div class=”Choices”>
<label>
<input type=”radio” name=”prob3″ value=”D”
/>和学生平等相处,能全面满足学生各种需要
</label>
<label>
<input type=”radio” name=”prob3″ value=”A”
/>所在教学班的成绩优于其他平行班
</label>
<label>
<input type=”radio” name=”prob3″ value=”B”
/>严格管理学生/所带的班级班风良好
</label>
<label>
<input type=”radio” name=”prob3″ value=”C”
/>父母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class=”Problem” id=”4″>
<li>4你认为怎样的老师是好老师?</li>
<div class=”Choices”>
<label>
<input type=”radio” name=”prob4″ value=”D”
/>和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学和学生平等相处,能全面满足学生各种需要
</label>
<label>
<input type=”radio” name=”prob4″ value=”A”
/>所在教学班的成绩优于其他平行班
</label>
<label>
<input type=”radio” name=”prob4″ value=”B”
/>严格管理学生/所带的班级班风良好
</label>
<label>
<input type=”radio” name=”prob4″ value=”C”
/>父母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div
class=”Desc”>还是选择题:一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。一大堆的说明文字。</div>
<div class=”Problem” id=”10″>
<li>5你认为怎样的老师是好老师?</li>
<div class=”Choices”>
<label>
<input type=”radio” name=”prob5″ value=”D”
/>和10学生平等相处,能全面满足学生各种需要
</label>
<label>
<input type=”radio” name=”prob5″ value=”A”
/>所10在教学班的成绩优于其他平行班
</label>
<label>
<input type=”radio” name=”prob5″ value=”B”
/>严10jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj格管文字
</label>
<label>
<input type=”radio” name=”prob5″ value=”C”
/>父10母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class=”Problem” id=”5″>
<li>5你认为怎样的老师是好老师?</li>
<div class=”Choices”>
<label>
<input type=”radio” name=”prob5″ value=”D”
/>和学生平等相处,能全面满足学生各种需要
</label>
<label>
<input type=”radio” name=”prob5″ value=”A”
/>所在教学班的成绩优于其他平行班
</label>
<label>
<input type=”radio” name=”prob5″ value=”B”
/>严jhjhjhjhkljlkjjkljjkjjkllkjlkjljkjljlkj格管<img
src=”aaaa9.jpg” height=”300px” width=”400px” alt=”pic”/>文字
</label>
<label>
<input type=”radio” name=”prob5″ value=”C”
/>父母般地关心学生的生活和情绪状态
</label>
</div>
</div>
<div class=”Problem” id=”6″>
<li>6你认为怎样的老师是好老师?</li>
<div class=”Choices”>
<label>
<input type=”radio” name=”prob6″ value=”D” />和
</label>
<label>
<input type=”radio” name=”prob6″ value=”A” />所
</label>
<label>
<input type=”radio” name=”prob6″ value=”B” />严
</label>
<label>
<input type=”radio” name=”prob6″ value=”C” />父
</label>
<label>
<input type=”radio” name=”prob6″ value=”E”
/>和班的成绩班的成绩班的成绩班的成绩班的成绩
</label>
<label>
<input type=”radio” name=”prob6″ value=”F”
/>所班的成绩班的成绩班的成绩
</label>
<label>
<input type=”radio” name=”prob6″ value=”G”
/>严班的班的成绩班的成绩班的成绩班的成绩
</label>
<label>
<input type=”radio” name=”prob6″ value=”H” />父
</label>
</div>
</div>
</ol>
</form>
</body>
</html>

复制代码 代码如下:

样式文件(CSS)

Customer customer = new Customer
{ Unid=1,CustomerName=”宋江”,Memo=”天魁星”,Other=”黑三郎”};
Customer customer2 = new Customer
{ Unid = 2, CustomerName = “吴用”, Memo = “天机星”, Other = “智多星”
};
List<Customer> _list = new List<Customer>();
_list.Add(customer);
_list.Add(customer2);
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list);
context.Response.Write(strJson);

function GetCustomerList() {
$.getJSON(
“JqueryData2.ashx”,
function(data) {
var tt = “”;
$.each(data, function(k, v) {
$.each(v,function(kk, vv) {
tt += kk + “:” + vv + “<br/>”;
});
});
$(“#divmessage”).html(tt);
});
}
[code]
(三)请求aspx文件中的CS
[code]
protected void Page_Load(object sender, EventArgs e)
{
Customer customer = new Customer
{ Unid = 1, CustomerName = “宋江”, Memo = “天魁星”, Other = “黑三郎”
};
string strJson =
Newtonsoft.Json.JsonConvert.SerializeObject(customer);
Response.Write(strJson);
}

复制代码 代码如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注