我的又一个web2.0作品

亮点1： 

自动完成查询功能。

数据库中的单词为：

real  book  mean  tend  tense  press  treat  plea  move  spy mute  fame  claim  sense  trick  ride  knife  big  cite  die  aid  end  fight  good  ill lip  nick  out  pick  quick  side  tide  ut  view  wide  xu  zoo

 

亮点2：

单词本（用户可以将查询出来的单词加入单词本，也可以从单词本中删除已经熟记的单词）。

亮点3： 

留言板功能（用户可以将问题反馈给管理员或者其他用户）。

亮点4： 

进入本查询系统后，所有功能都使用无刷新技术（Ajax与数据库进行通信），从而提高通信速度与可用性。

随便截取几个界面：

下面给出部分源代码：

//自动完成查询功能auto-complete
2   $().ready(function () {
3 $.post("ashx/getAllWord.ashx", function (returnData, status) {
4 var wordSellect = new Array();
5 if (status == "success") {
6 var words = $.parseJSON(returnData);
7 for (var i = 0; i < words.length; i++) {
8 wordSellect.push(words[i].Word);//给数组wordSellect数组赋值
9   }
10 $("#checkWordText").focus().autocomplete(wordSellect);
11 }
12 });
13 });
14 function changeOptions() {
15 var max = parseInt(window.prompt('Please type number of items to display:', jQuery.Autocompleter.defaults.max));
16 if (max > 0) {
17 $("#checkWordText").setOptions({
18 max: max
19 });
20 }
21 }
22 //查询文本框中的单词
23   function beginCheck() {
24 var word = $("#checkWordText").val();
25 $.post("ashx/checkWord.ashx", { "word": word }, function (returnData, status) {
26 if (status == "success") {
27 var words = $.parseJSON(returnData);
28 for (var i = 0; i < words.length; i++) {
29 $("#hiddenWord").val(words[i].Word); //将值赋给隐藏字段
30   $("#hiddenPronunciation").val(words[i].Pronunciation); //将值赋给隐藏字段
31 $("#hiddenTranslation").val(words[i].Translation); //将值赋给隐藏字段
32 $("#hiddenExample").val(words[i].Example); //将值赋给隐藏字段
33 var li = $("<li><b>" + words[i].Word + "</b><br/><br/>读音：<br/> <font color=red>" + words[i].Pronunciation + "</font><br/>语意：<br/> " + words[i].Translation + "<br/>例句：<br/> " + words[i].Example + "<li><br/><input type=button value=加入单词本 onclick=addTOMyNote()>");
34 $("#checkResultUl").empty();
35 $("#checkResultUl").append(li);
36 }
37 if (i == 0) {
38 $("#checkResultUl").empty();
39 $("#checkResultUl").append("<font color=red>查不到此单词！</font>");
40 }
41 }
42 else {
43 $("#checkResultUl").append("网络连接错误！");
44 }
45 
46 });
47 }
48 //实现显示单词本的功能
49 function showWord() {
50 $(".loading").show("slow");
51 $.post("ashx/getMyNote.ashx", function (returnData, status) {
52 if (status == "success") {
53 $("#myNoteUl").empty();
54 var words = $.parseJSON(returnData);
55 for (var i = 0; i < words.length; i++) {
56 word1 = words[i].Word;
57 var li = $("<li><b> " + word1 + " " + words[i].Translation + "</li><input type=button value=查看 " + word1 + " onclick='checkWord($(this).val().substring(4,$(this).val().length))' style='display:none'><input type=button value=删除 " + word1 + " onclick='delectWord($(this).val().substring(4,$(this).val().length))' style='display:none'>");
58 $("#myNoteUl").append(li);
59 }
60 if ($("#hiddenManageMyNote").val() == "true"){
61 $("#myNoteUl input").show("fast");
62 }
63 }
64 else {
65 $("#checkResultUl").append("网络连接错误！");
66 }
67 });
68 $(".loading").hide("slow");
69 }

请大家提出建议，帮忙指正，在下不胜感激！谢谢！