1.17学习jquery权威指南
1、ajax方面（东西比较杂，很多相关于.net挂钩的服务器端接触没有实际操作，全部放进来，或许以后当作demo使用）
￥（“body”）.load("text.txt"); //这个是最简单的jquey加载
$("body").load("text.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success"){
console.log("外部加载成功");
}
if(statusTxt=="error"){
console.log("错误是："+xhr.status+":"+xhr.statusTxt);
}
})
$.get(
"ceshi.txt"
,
function
(
data
,
status
){
console
.log(
"数据是："
+
data
+
"\n状态"
+
status);
})
这个是get方式获取
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
</
head
>
<
body
>
<
div
class
=
"ceshi"
>
姓名：测试<
br
/>
性别：未知<
br
/>
</
div
>
<
div
class
=
"ceshi1"
>
姓名：测试1<
br
/>
性别：未知1<
br
/>
</
div
>
</
body
>
</
html
>
//上面是b.html中的
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
<
script
src
=
"js/jquery-1.11.1.min.js"
type
=
"text/javascript"
charset
=
"utf-8"
></
script
>
<
style
type
=
"text/css"
>
</
style
>
</
head
>
<
body
>
<
input
type
=
"button"
name
=
"hq"
id
=
"hq"
value
=
"获取数据"
/>
<
div
id
=
"show"
></
div
>
</
body
>
<
script
type
=
"text/javascript"
>
var
objXmlHttp
=
null
;
function
CreateXMLHTTP
() {
if
(
window
.ActiveXObject) {
objXmlHttp
= new
ActiveXObject(
"Microsoft.XMLHTTP"
);
}
else
{
if
(
window
.XMLHttpRequest) {
objXmlHttp
= new
XMLHttpRequest();
}
else
{
alert(
"初始化XMLHTTP错误！"
);
}
}
}
function
GetSendDate
() {
$(
"#show"
).html(
"<img src='img/t2.png/>'"
);
var
strSendUrl
=
"b.html?data="
+
Date(); //这里添加 ？data="+Date();的作用是删除缓存的数据，以获取最新数据
CreateXMLHTTP();
objXmlHttp.open(
"GET"
, strSendUrl,
true
);
objXmlHttp.
onreadystatechange
=
function
() {
if
(objXmlHttp.readyState
==
4
) {
if
(objXmlHttp.status
==
200
) {
document
.getElementById(
"show"
).innerHTML
=
objXmlHttp.responseText;
}
}
}
objXmlHttp.send(
null
);
}
$(
"#hq"
).click(
function
() {
GetSendDate();
})
</
script
>
</
html
>
//上面是ajax方式的获取
//$("#hq").click(function(){
// $("#show").load("b.html");
//})
//这样写是获取b.html页面中的所有数据
$(
"#hq"
).click(
function
(){
$(
"#show"
).load(
"b.html .ceshi"
);
})
//这种写法只获取样式为ceshi的数据
//上面是jquey的load方法获取数据，很方便的样子～
$(
"#hq"
).click(
function
(){
$.getJSON(
"data.json"
,
function
(
data
){
$(
"#show"
).empty();
var
strHTML
=
""
;
$.each(data,
function
(
dataindex
,
info
) {
strHTML
+=
"姓名："
+
info[
"name"
]
+
"<br/>"
;
strHTML
+=
"性别："
+
info[
"sex"
]
+
"<br/>"
;
strHTML
+=
"年龄："
+
info[
"age"
]
+
"<br/>"
;
});
$(
"#show"
).html(strHTML);
})
})
//上面是getJSON的获取方式
//获取多层的时候的话就是$.each(data[i].value,function(dataindex,info))
[
{
"name"
:
"jl"
,
"sex"
:
"男"
,
"age"
:
"23"
,
"value"
: [
{
"pid"
:
"1"
,
"username"
:
"曾用名"
},
{
"pid"
:
"2"
,
"username"
:
"曾用名1"
}
]
}, {
"name"
:
"ceshi"
,
"sex"
:
"未知"
,
"age"
:
"未知"
,
"value"
: [
{
"pid"
:
"3"
,
"username"
:
"曾用名3"
},
{
"pid"
:
"4"
,
"username"
:
"曾用名4"
}
]
}
]
//上面是与getJSON相对应的json数据
$("#hq").click(function(){
$.getScript("userinfo.js");
})
//上面是getscript方式的数据调用
var
data
=
[{
"name"
:
"jl"
,
"sex"
:
"男"
,
"age"
:
"23"
}, {
"name"
:
"ceshi"
,
"sex"
:
"未知111"
,
"age"
:
"未知11"
}];
var
strHTML
=
""
;
$.each(data,
function
(
dataindex
,
info
) {
strHTML
+=
"姓名："
+
info[
"name"
]
+
"<br/>"
;
strHTML
+=
"性别："
+
info[
"sex"
]
+
"<br/>"
;
strHTML
+=
"年龄："
+
info[
"age"
]
+
"<br/>"
;
})
$(
"#show"
).html(strHTML);
//上面是与之对应的userinfo.js的数据
jQuery中异步加载XML文档
$.get(
url
,[data],[callback],[type])
可选参数表示返回数据的格式，如html、
xml、
js、
json、
text等
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="6-5.aspx.cs" Inherits="WebApplication1._6_5" %>
<!
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
=
"Scripts/jquery-1.4.2.js" type
=
"text/javascript"
></
script
>
<
script type
=
"text/javascript"
>
$(
function
() {
$("#Button1").click(
function
() {
$.get("UserInfo.xml",
function
(
data
) {
$("#divTip").empty();
var
strHTML
=
"";
$(data).find("User").each(
function
() {
var
$strUser
=
$(this);
strHTML
+=
"姓名："
+
$strUser.find("name").
text
()
+
"<br />";
strHTML
+=
"性别："
+
$strUser.find("sex").
text
()
+
"<br />";
strHTML
+=
"邮箱："
+
$strUser.find("email").
text
()
+
"<br />";
});
$("#divTip").html(strHTML);
})
});
});
</
script
>
</
head
>
<
body
>
<
div
class
=
"divFrame"
>
<
div
class
=
"divTitle"
>
<
input
id
=
"Button1" type
=
"button" onclick
=
"GetSendData()"
class
=
"btn" value
=
"获取数据"
/>
</
div
>
<
div
class
=
"divContent"
>
<
div id
=
"divTip"
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
//下面是userinfo的数据
UserInfo.
xml
<?xml version="1.0" encoding="utf-8" ?>
<
Info
>
<
User id
=
"1"
>
<
name
>
陶国荣
</
name
>
<
sex
>
男
</
sex
>
<
email
>
tao_guo_rong@
163.
com
</
email
>
</
User
>
<
User id
=
"2"
>
<
name
>
李建洲
</
name
>
<
sex
>
女
</
sex
>
<
email
>
xiaoli@
163.
com
</
email
>
</
User
>
</
Info
>
使用get请求aspx服务器端数据查询
| <!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>$.get发送请求</title> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2-vsdoc.js"> | |
| </script> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2.js"> | |
| </script> | |
| <style type="text/css"> | |
| body{font-size:13px} | |
| .divFrame{width:260px;border:solid 1px #666} | |
| .divFrame .divTitle{padding:5px;height:23px} | |
| .divFrame .divTitle span{float:left;padding:2px} | |
| .divFrame .divContent{padding:8px} | |
| .divFrame .divContent .clsShow{font-size:14px} | |
| .txt{border:#666 1px solid;padding:2px;width:118px;float:left;margin-right:3px} | |
| .btn {border:#666 1px solid;padding:2px;width:80px;float:left; | |
| filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} | |
| </style> | |
| <script type="text/javascript"> | |
| $(function() { | |
| $("#Button1").click(function() { //按钮单击事件 | |
| //打开文件，并通过回调函数返回服务器响应后的数据 | |
| $.get("UserInfo.aspx", | |
| { name: encodeURI($("#txtName").val()) }, | |
| function(data) { | |
| $("#divTip") | |
| .empty() //先清空标记中的内容 | |
| .html(data); //显示服务器返回的数据 | |
| }) | |
| }) | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <div class="divFrame"> | |
| <div class="divTitle"> | |
| <span>姓名：</span> | |
| <input id="txtName" type="text" class="txt" /> | |
| <input id="Button1" type="button" | |
| class="btn" value="请求数据" /> | |
| </div> | |
| <div class="divContent"> | |
| <div id="divTip"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| //下面是对应的userinfo.aspx的页面 |
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符
string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
if (strName == "陶国荣")
{
strHTML += "姓名：陶国荣<br>";
strHTML += "性别：男<br>";
strHTML += "邮箱：[email protected]<hr>";
}
else if (strName == "李建洲")
{
strHTML += "姓名：李建洲<br>";
strHTML += "性别：女<br>";
strHTML += "邮箱：[email protected]<hr>";
}
strHTML += "</div>";
Response.Write(strHTML);
%>
注释：客户端在向服务器端传递参数的时候格式为：{key:value0,key:value1,.......}如果参数值为中文格式，必须通过使用encodeURI进行转码，当然客户端接收到时候使用decodeURI进行解码即可
使用post序列化全局函数向服务器请求数据
| <!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>serialize()序列化表单</title> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2-vsdoc.js"> | |
| </script> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2.js"> | |
| </script> | |
| <style type="text/css"> | |
| body{font-size:13px} | |
| .divFrame{width:345px;border:solid 1px #666} | |
| .divFrame .divTitle{padding:5px;height:23px} | |
| .divFrame .divTitle span{float:left;padding:2px;padding-top:5px;} | |
| .divFrame .divContent{padding:8px} | |
| .divFrame .divContent .clsShow{font-size:14px} | |
| select,input{float:left} | |
| .txt{border:#666 1px solid;padding:2px;width:80px;margin-right:3px} | |
| .btn {border:#666 1px solid;padding:2px;width:50px; | |
| filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} | |
| </style> | |
| <script type="text/javascript"> | |
| $(function() { | |
| $("#Button1").click(function() { //按钮单击事件 | |
| //打开文件，并通过回调函数返回服务器响应后的数据 | |
| $.post("User-Info.aspx", | |
| $("#frmUserInfo").serialize(), //序列化表单数据 | |
| function(data) { | |
| $("#divTip") | |
| .empty() //先清空标记中的内容 | |
| .html(data); //显示服务器返回的数据 | |
| }) | |
| }) | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <form id="frmUserInfo"> | |
| <div class="divFrame"> | |
| <div class="divTitle"> | |
| <span>姓名：</span> | |
| <input name="txtName" type="text" class="txt" /> | |
| <select name="selSex" style="height:22px;margin-right:3px"> | |
| <option value="">选性别</option> | |
| <option value="男">男</option> | |
| <option value="女">女</option> | |
| </select> | |
| <input name="chkEmail" type="checkbox" value="1" style="padding-top:5px" /><span style="margin-right:10px">显示邮箱</span> | |
| <input id="Button1" type="button" | |
| class="btn" value="请求" /> | |
| </div> | |
| <div class="divContent"> | |
| <div id="divTip"></div> | |
| </div> | |
| </div> | |
| </form> | |
| </body> | |
| </html> | |
|
下面是post对应的user_info.aspx的数据
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符
string strSex = System.Web.HttpUtility.UrlDecode(Request["sex"]);//解码性别字符
string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
if (strName == "陶国荣" && strSex=="男")
{
strHTML += "姓名：陶国荣<br>";
strHTML += "性别：男<br>";
strHTML += "邮箱：[email protected]<hr>";
}
else if (strName == "李建洲" && strSex == "女")
{
strHTML += "姓名：李建洲<br>";
strHTML += "性别：女<br>";
strHTML += "邮箱：[email protected]<hr>";
}
strHTML += "</div>";
Response.Write(strHTML);
%>
下面是ajax方式的请求与发送数据
<!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>$.ajax()方法发送请求</title>
<script type="text/javascript"
src="Jscript/jquery-1.4.2-vsdoc.js">
</script>
<script type="text/javascript"
src="Jscript/jquery-1.4.2.js">
</script>
<style type="text/css">
body{font-size:13px}
.divFrame{width:225px;border:solid 1px #666}
.divFrame .divTitle{padding:5px;height:23px}
.divFrame .divTitle span{float:left;padding:2px;padding-top:5px;}
.divFrame .divContent{padding:8px;text-align:center}
.divFrame .divContent .clsShow{font-size:14px;line-height:2.0em}
.divFrame .divContent .clsShow .clsError{font-size:13px;border:solid 1px #cc3300;padding:2px;display:none;margin-bottom:5px;background-color:#ffe0a3}
.txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}
.btn {border:#666 1px solid;padding:2px;width:50px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript">
$(function() {
$.ajax({ //请求登录页
url: "login.html", //登录静态页
dataType: "html",
success: function(HTML) { //返回页面内容
$("#frmUserLogin").html(HTML); //将页面内容置入表单
$("#btnLogin").click(function() { //“登录”按钮单击事件
//获取用户名称
var strTxtName = encodeURI($("#txtName").val());
//获取输入密码
var strTxtPass = encodeURI($("#txtPass").val());
//开始发送数据
$.ajax({ //请求登录处理页
url: "login.aspx", //登录处理页
dataType: "html",
//传送请求数据
data: { txtName: strTxtName, txtPass: strTxtPass },
success: function(strValue) { //登录成功后返回的数据
//根据返回值进行状态显示
if (strValue == "True") {
$(".clsShow").html("操作提示，登录成功！");
}
else {
$("#divError").show().html("用户名或密码错误！");
}
}
})
})
}
})
})
</script>
</head>
<body>
<form id="frmUserLogin"></form>
</body>
</html>
下面是login.aspx页面的内容
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]); //解码姓名字符
string strPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]); //解码密码字符
bool blnLogin = false;
if (strName == "admin" && strPass == "123456")
{
blnLogin = true;
}
Response.Write(blnLogin);
%>
下面是login.html页面的内容
<div class="divFrame">
<div class="divTitle">
<span>用户登录</span>
</div>
<div class="divContent">
<div class="clsShow">
<div id="divError" class="clsError"></div>
<div>名称：<input id="txtName" type="text" class="txt" /></div>
<div>密码：<input id="txtPass" type="password" class="txt" /></div>
<div>
<input id="btnLogin" type="button" value="登录" class="btn" />  
<input id="btnReset" type="reset" value="取消" class="btn" />
</div>
</div>
</div>
</div>
|
下面是ajaxsetup设置全局性的ajax选项
| <!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>$.ajaxSetup()方法全局设置Ajax</title> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2-vsdoc.js"> | |
| </script> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2.js"> | |
| </script> | |
| <style type="text/css"> | |
| body{font-size:13px} | |
| .divFrame{width:225px;border:solid 1px #666} | |
| .divFrame .divTitle{padding:5px;height:30px} | |
| .divFrame .divTitle span{float:left;padding:2px;padding-top:5px} | |
| .divFrame .divContent{padding:8px} | |
| .divFrame .divContent .clsShow{font-size:14px} | |
| .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px} | |
| .btn {border:#666 1px solid;padding:2px;width:65px; | |
| filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} | |
| </style> | |
| <script type="text/javascript"> | |
| $(function() { | |
| $.ajaxSetup({ //设置全局性的Ajax选项 | |
| type: "GET", | |
| url: "UserInfo.xml", | |
| dataType: "xml" | |
| }) | |
| $("#Button1").click(function() { //"姓名”按钮的单击事件 | |
| $.ajax({ | |
| success: function(data) { //传回请求响应的数据 | |
| ShowData(data, "姓名", "name"); //显示"姓名"部分 | |
| } | |
| }) | |
| }) | |
| $("#Button2").click(function() { //"性别”按钮的单击事件 | |
| $.ajax({ | |
| success: function(data) { //传回请求响应的数据 | |
| ShowData(data, "性别", "sex"); //显示"性别"部分 | |
| } | |
| }) | |
| }) | |
| $("#Button3").click(function() { //"邮箱”按钮的单击事件 | |
| $.ajax({ | |
| success: function(data) { //传回请求响应的数据 | |
| ShowData(data, "邮箱", "email"); //显示"邮箱"部分 | |
| } | |
| }) | |
| }) | |
| /* | |
| *根据名称与值，获取请求响应数据中的某部分 | |
| *@Param d为请求响应后的数据 | |
| *@Param n为数据中文说明字符 | |
| *@Param d为数据在响应数据中的元素名称 | |
| */ | |
| function ShowData(d, n, v) { | |
| $("#divTip").empty(); //先清空标记中的内容 | |
| var strHTML = ""; //初始化保存内容变量 | |
| $(d).find("User").each(function() { //遍历获取的数据 | |
| var $strUser = $(this); | |
| strHTML += n + "：" + $strUser.find(v).text() + "<hr>"; | |
| }) | |
| $("#divTip").html(strHTML); //显示处理后的数据 | |
| } | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <div class="divFrame"> | |
| <div class="divTitle"> | |
| <span><input id="Button1" type="button" value="姓名" class="btn" /></span> | |
| <span><input id="Button2" type="button" value="性别" class="btn" /></span> | |
| <span><input id="Button3" type="button" value="邮箱" class="btn" /></span> | |
| </div> | |
| <div class="divContent"> | |
| <div id="divTip" class="clsShow"></div> | |
| </div> | |
| </div> | |
| </body> | |
|
</html>
下面是对应的xml文件
<?xml version="1.0" encoding="UTF-8"?>
-<Info>
-<User id="1">
<name>陶国荣</name>
<sex>男</sex>
<email>[email protected]</email>
</User>
-<User id="2">
<name>李建洲</name>
<sex>女</sex>
<email>[email protected]</email>
</User>
</Info>
|
|
ajaxstar和ajaxstop的应用
| <!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>Ajax中的全局事件</title> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2-vsdoc.js"> | |
| </script> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2.js"> | |
| </script> | |
| <style type="text/css"> | |
| body{font-size:13px} | |
| .divFrame{width:325px;border:solid 1px #666} | |
| .divFrame .divTitle{padding:5px;height:30px} | |
| .divFrame .divTitle span{float:left;padding:2px;padding-top:5px} | |
| .divFrame .divContent{padding:8px} | |
| .divFrame .divContent .clsShow{font-size:14px} | |
| .divFrame .divContent .clsTip{width:160px;text-align:center;font-size:13px;border:solid 1px #cc3300;padding:2px;margin-bottom:5px;background-color:#ffe0a3} | |
| .txt{border:#666 1px solid;padding:2px;width:160px;margin-right:3px} | |
| .btn {border:#666 1px solid;padding:2px;width:65px; | |
| filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} | |
| </style> | |
| <script type="text/javascript"> | |
| $(function() { | |
| //元素绑定全局ajaxStart事件 | |
| $("#divMsg").ajaxStart(function() { | |
| $(this).show(); //显示元素 | |
| }) | |
| //元素绑定全局ajaxStop事件 | |
| $("#divMsg").ajaxStop(function() { | |
| $(this).html("已成功获取数据。").hide(); | |
| }) | |
| //按钮的单击事件 | |
| $("#Button1").click(function() { | |
| $.ajax({ //带参数请求服务器 | |
| type: "GET", | |
| url: "GetData.aspx", | |
| //获取加码后的数据并作为参数传给服务器 | |
| data: { txtData: encodeURI($("#txtData").val()) }, | |
| dataType: "html", | |
| success: function(data) { //显示解码后的返回数据 | |
| $("#divTip").html(decodeURI(data)); | |
| } | |
| }) | |
| }) | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <div class="divFrame"> | |
| <div class="divTitle"> | |
| <span>数据：<input id="txtData" type="text" class="txt" /></span> | |
| <span><input id="Button1" type="button" value="发送" class="btn" /></span> | |
| </div> | |
| <div class="divContent"> | |
| <div id="divMsg" class="clsTip">正在发送数据请求…</div> | |
| <div id="divTip" class="clsShow"></div> | |
| </div> | |
| </div> | |
| </body> | |
|
</html>
下面是对应的getdata。aspx页面内容
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = Request["txtData"]; //返回传回的参数
Response.Write(strName); //返回传回的参数
%>
|
下面是一个留言板～
| <!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 type="text/javascript" | |
| src="Jscript/jquery-1.4.2-vsdoc.js"> | |
| </script> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2.js"> | |
| </script> | |
| <link type="text/css" href="Css/css_Ajax.css" rel="Stylesheet" /> | |
| <script type="text/javascript" src="Jscript/js_Ajax.js"></script> | |
| </head> | |
| <body> | |
| <div class="divFrame"> | |
| <div class="divTitle"> | |
| <span>最新点评</span> | |
| </div> | |
| <div class="divContent"> | |
| </div> | |
| <div class="divSubmit"> | |
| <div class="SubTitle">发表评论<span id="divMsg" class="clsTip">正在发送数据请求…</span></div> | |
| <div class="SubContent"> | |
| <textarea id="txtContent" rows="6" class="txt"></textarea> | |
| <div class="SubBtn"> | |
| <span style="float:left">用户名：<input id="txtName" type="text" class="txt" /></span> | |
| <span style="float:right"><input id="Button1" type="button" value="发表" class="btn" /></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
下面是 js_Ajax.js的内容
/// <reference path="jquery-1.4.2-vsdoc.js"/>
/// <reference path="jquery-1.4.2.js"/>
$(function() {
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function() {
$(this).show(); //显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function() {
$(this).html("数据处理已完成。").hide();
})
//初始化点评数据
LoadData();
$("#Button1").click(function() { //点击"发表"按钮事件
//获取加码后的用户名
var strName = encodeURI($("#txtName").val());
//获取加码后的发表内容
var strContent = encodeURI($("#txtContent").val());
$.ajax(
{
type: "GET",
url: "AddData.aspx", //请求增加数据动态页
dataType: "html",
data: { name: strName, content: strContent },
success: function(msg) {
alert(msg);
LoadData();
$("#txtName").val("");
$("#txtContent").val("");
}
})
})
/*
*动态加载XML格式的点评数据
*/
function LoadData() {
$.ajax(
{
type: "GET",
url: "CommentData.xml", //请求XML格式数据
dataType: "xml",
cache: false,
success: function(data) {
$(".divContent").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
if ($(data).find("Data").length == 0) {//如果没有找到数据
strHTML = "<div style='text-align:center'>目前还没有找到点评数据！</div>";
}
$(data).find("Data").each(function() { //遍历获取的数据
var $strUser = $(this);
strHTML += "<div class='clsShow'>";
strHTML += "<div class='ShowTitle'>荣拓网友 <a href=''>" + $strUser.find("name").text() + "</a></div>";
strHTML += "<div class='ShowContent'>" + $strUser.find("content").text() + "</div>";
strHTML += "<div class='ShowBottom'>发送时间 " + $strUser.find("date").text() + "</div>"
strHTML += "</div>"
})
$(".divContent").html(strHTML); //显示处理后的数据
}
})
}
/// <reference path="jquery-1.4.2.js"/>
$(function() {
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function() {
$(this).show(); //显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function() {
$(this).html("数据处理已完成。").hide();
})
//初始化点评数据
LoadData();
$("#Button1").click(function() { //点击"发表"按钮事件
//获取加码后的用户名
var strName = encodeURI($("#txtName").val());
//获取加码后的发表内容
var strContent = encodeURI($("#txtContent").val());
$.ajax(
{
type: "GET",
url: "AddData.aspx", //请求增加数据动态页
dataType: "html",
data: { name: strName, content: strContent },
success: function(msg) {
alert(msg);
LoadData();
$("#txtName").val("");
$("#txtContent").val("");
}
})
})
/*
*动态加载XML格式的点评数据
*/
function LoadData() {
$.ajax(
{
type: "GET",
url: "CommentData.xml", //请求XML格式数据
dataType: "xml",
cache: false,
success: function(data) {
$(".divContent").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
if ($(data).find("Data").length == 0) {//如果没有找到数据
strHTML = "<div style='text-align:center'>目前还没有找到点评数据！</div>";
}
$(data).find("Data").each(function() { //遍历获取的数据
var $strUser = $(this);
strHTML += "<div class='clsShow'>";
strHTML += "<div class='ShowTitle'>荣拓网友 <a href=''>" + $strUser.find("name").text() + "</a></div>";
strHTML += "<div class='ShowContent'>" + $strUser.find("content").text() + "</div>";
strHTML += "<div class='ShowBottom'>发送时间 " + $strUser.find("date").text() + "</div>"
strHTML += "</div>"
})
$(".divContent").html(strHTML); //显示处理后的数据
}
})
}
})
下面是 css_Ajax.css的内容
body{font-size:13px}
a
{
text-decoration:none
}
/*外框样式*/
.divFrame
{
width:572px;
border:solid 1px #666;
background-color:#fafcff
}
/*外框中主题样式*/
.divFrame .divTitle
{
padding:5px;
background-color:#eee
}
.divFrame .divTitle span
{
padding:2px;
padding-top:5px;
font-family:黑体;
font-size:14px
}
/*外框中内容样式*/
.divFrame .divContent
{
padding:8px
}
.divFrame .divContent .clsShow
{
border-bottom:dashed 1px #ccc;
padding:3px;
margin:5px;
line-height:2.0em
}
.divFrame .divContent .clsShow .ShowTitle
{
padding-left:5px;
font-size:12px;
color:#555
}
.divFrame .divContent .clsShow .ShowContent
{
padding-left:5px;
font-size:14px
}
.divFrame .divContent .clsShow .ShowBottom
{
text-align:right;
font-size:12px;
color:#555
}
/*外框中提交点评内容样式*/
.divFrame .divSubmit
{
padding:20px
}
.divFrame .divSubmit .SubTitle
{
padding-bottom:10px;
font-weight:bold
}
.divFrame .divSubmit .SubContent
{
width:532px
}
.divFrame .divSubmit .SubContent textarea
{
width:525px
}
.divFrame .divSubmit .SubContent .SubBtn
{
padding-top:10px;
padding-bottom:12px;
font-size:12px;
color:#555;
font-weight:bold
}
/*侦察请求状态样式*/
.clsTip
{
position:absolute;
width:160px;
text-align:center;
font-size:13px;
border:solid 1px #cc3300;
padding:2px;
margin-bottom:5px;
background-color:#ffe0a3
}
/*文本框样式*/
.txt
{
border:#666 1px solid;
padding:2px;
width:100px;
margin-right:3px
}
/*按钮样式*/
.btn
{
border:#666 1px solid;
padding:2px;
width:65px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8)
a
{
text-decoration:none
}
/*外框样式*/
.divFrame
{
width:572px;
border:solid 1px #666;
background-color:#fafcff
}
/*外框中主题样式*/
.divFrame .divTitle
{
padding:5px;
background-color:#eee
}
.divFrame .divTitle span
{
padding:2px;
padding-top:5px;
font-family:黑体;
font-size:14px
}
/*外框中内容样式*/
.divFrame .divContent
{
padding:8px
}
.divFrame .divContent .clsShow
{
border-bottom:dashed 1px #ccc;
padding:3px;
margin:5px;
line-height:2.0em
}
.divFrame .divContent .clsShow .ShowTitle
{
padding-left:5px;
font-size:12px;
color:#555
}
.divFrame .divContent .clsShow .ShowContent
{
padding-left:5px;
font-size:14px
}
.divFrame .divContent .clsShow .ShowBottom
{
text-align:right;
font-size:12px;
color:#555
}
/*外框中提交点评内容样式*/
.divFrame .divSubmit
{
padding:20px
}
.divFrame .divSubmit .SubTitle
{
padding-bottom:10px;
font-weight:bold
}
.divFrame .divSubmit .SubContent
{
width:532px
}
.divFrame .divSubmit .SubContent textarea
{
width:525px
}
.divFrame .divSubmit .SubContent .SubBtn
{
padding-top:10px;
padding-bottom:12px;
font-size:12px;
color:#555;
font-weight:bold
}
/*侦察请求状态样式*/
.clsTip
{
position:absolute;
width:160px;
text-align:center;
font-size:13px;
border:solid 1px #cc3300;
padding:2px;
margin-bottom:5px;
background-color:#ffe0a3
}
/*文本框样式*/
.txt
{
border:#666 1px solid;
padding:2px;
width:100px;
margin-right:3px
}
/*按钮样式*/
.btn
{
border:#666 1px solid;
padding:2px;
width:65px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8)
}
下面是xml的内容
<?xml version="1.0"?>
-<Comment>
-<Data>
<name>张三</name>
<content>这个话题真是不错啊！</content>
<date>7:15:42</date>
</Data>
</Comment>
下面是adddata.aspx页面的内容
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.IO" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]); //解码点评用户名称
string strContent = System.Web.HttpUtility.UrlDecode(Request["content"]); //解码点评提交内容
string strFileName = "CommentData.xml";
//定义xml文档变量
XmlDocument xmlDoc = new XmlDocument();
//打开指定的xml文档
xmlDoc.Load(Server.MapPath(strFileName));
//查找根节点元素
XmlNode xmlN = xmlDoc.SelectSingleNode("Comment");
//加入一个节点元素
XmlElement xmlE = xmlDoc.CreateElement("Data");
//创建一个子节点
XmlElement xmlEn = xmlDoc.CreateElement("name");
//设置节点文本
xmlEn.InnerText = strName;
//添加到节点中
xmlE.AppendChild(xmlEn);
//创建一个子节点
XmlElement xmlEc = xmlDoc.CreateElement("content");
//设置节点文本
xmlEc.InnerText = strContent;
//添加到节点中
xmlE.AppendChild(xmlEc);
//创建一个子节点
XmlElement xmlEd = xmlDoc.CreateElement("date");
//获取时间的时分秒
string strSendTime = DateTime.Now.Hour + ":" + DateTime.Now.Minute + ":" + DateTime.Now.Second;
xmlEd.InnerText =strSendTime;
//添加到节点中
xmlE.AppendChild(xmlEd);
//将节点加入根节点中
xmlN.AppendChild(xmlE);
//保存创建好的xml文档
xmlDoc.Save(Server.MapPath(strFileName));
Response.Write("您的点评已成功发表！");
%>
上面这个留言板是有问题的，只能获取，不知道是不是aspx文件有问题