zoukankan html css js c++ java

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+ " 状态" +status);

})

这个是get方式获取

<!DOCTYPE html>

<html>

< head>

< meta charset= "UTF-8">

< title></title >

</ head>

< body>

< div class= "ceshi">

姓名：测试< br />

性别：未知< br />

邮箱：ceshi@qq.com

</ div>

< div class= "ceshi1">

姓名：测试1< br />

性别：未知1< br />

邮箱：ceshi@qq.com

</ 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">

< 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>

</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{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;118px;float:left;margin-right:3px}
	.btn {border:#666 1px solid;padding:2px;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 += "邮箱：tao_guo_rong@163.com<hr>";

}

else if (strName == "李建洲")

{

strHTML += "姓名：李建洲<br>";

strHTML += "性别：女<br>";

strHTML += "邮箱：xiaoli@163.com<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{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;80px;margin-right:3px}
	.btn {border:#666 1px solid;padding:2px;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 += "邮箱：tao_guo_rong@163.com<hr>"; } else if (strName == "李建洲" && strSex == "女") { strHTML += "姓名：李建洲<br>"; strHTML += "性别：女<br>"; strHTML += "邮箱：xiaoli@163.com<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{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;150px;margin-right:3px} .btn {border:#666 1px solid;padding:2px;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" /> &nbsp <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{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;150px;margin-right:3px}
	.btn {border:#666 1px solid;padding:2px;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>tao_guo_rong@163.com</email> </User> -<User id="2"> <name>李建洲</name> <sex>女</sex> <email>xiaoli@163.com</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{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{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;160px;margin-right:3px}
	.btn {border:#666 1px solid;padding:2px;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); //显示处理后的数据
}
})
}

})

下面是 css_Ajax.css的内容

body{font-size:13px}
a
{
text-decoration:none
}
/*外框样式*/
.divFrame
{
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
{
532px
}
.divFrame .divSubmit .SubContent textarea
{
525px
}
.divFrame .divSubmit .SubContent .SubBtn
{
padding-top:10px;
padding-bottom:12px;
font-size:12px;
color:#555;
font-weight:bold
}
/*侦察请求状态样式*/
.clsTip
{
position:absolute;
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;
100px;
margin-right:3px
}
/*按钮样式*/
.btn
{
border:#666 1px solid;
padding:2px;
65px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8)

}

下面是xml的内容

<?xml version="1.0"?>

-<Comment>

-<Data>

<content>这个话题真是不错啊！</content>

</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文件有问题

查看全文

相关阅读:
还需要做恰当的解读，此时你可能需要一些书：
创业公司的架构演进史
 任务调度平台Cuckoo-Schedule
ORACLE中死锁
 Action的模型绑定
 三次握手、四次握手、backlog
Django框架
 扩展BootstrapTable的treegrid功能
 Identity Service
Linux权限

原文地址：https://www.cnblogs.com/jldiary/p/5137797.html