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

邮箱：[email protected]

</ div>

< div class= "ceshi1">

姓名：测试1< br />

性别：未知1< br />

邮箱：[email protected]

</ 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>[email protected] 163.com</ email>

</ User>

< User id="2" >

< name>李建洲 </name>

< sex>女 </sex>

< email>[email protected] 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" />&nbsp;&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{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‘>荣拓网友&nbsp;&nbsp;<a href=‘‘>" + $strUser.find("name").text() + "</a></div>";
                       strHTML += "<div class=‘ShowContent‘>" + $strUser.find("content").text() + "</div>";
                       strHTML += "<div class=‘ShowBottom‘>发送时间&nbsp;&nbsp;" + $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)

}

下面是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文件有问题

时间： 2024-09-29 19:58:14

1.17学习jquery权威指南的相关文章

jquery的动画学习--jquery权威指南

前面的fadeIn和fadeOut还有fadeTo以及sildeToggle还有sildeUp\sildeDown还有toggle还有show.hide等都经常用,就不再手写了,需要注意的是fadeTo的合理应用,可以规定opactiy的具体数值,另外各个效果的回调函数可以多用用. $("div").click( function(){ $(this).animate({ width:"100px" , height :"100px" },300

《jQuery权威指南》学习笔记

1.1 jQuery概述 1.1.1 认识jQuery jQuery:Javascript.CSS.DOM.Ajax 1.1.2 jQuery基本功能 1.访问和操作DOM元素: 2.控制页面样式:兼容性: 3.对页面事件的处理:事件绑定机制: 4.大量插件在页面中的运用: 5.与Ajax技术的完美结合:异步读取服务器数据. 1.1.3 搭建jQuery开发环境 引入jQuery文件库:  <script language="jscript" type="text/ja

Android学习路线权威指南

前言 看到一篇文章中提到"最近几年国内的初级Android程序员已经很多了,但是中高级的Android技术人才仍然稀缺",这的确不假,从我在百度所进行的一些面试来看,找一个适合的高级Android工程师的确不容易,一般需要进行大量的面试才能挑选出一个比较满意的.为什么中高级Android程序员不多呢?这是一个问题,我不好回答,但是我想写一篇文章来描述下Android的学习路线,期望可以帮助更多的Android程序员提升自己.由于我也是从一个菜鸟过来的,所以我会结合我的个人经历以及我对A

学习js权威指南第五站 ---- 数组

1.数组方法 ①join() 将数组中的左右元素都转换成字符串并连接在一起,返回最后生成的字符串. ②reverse() 改变原数组 将数组中的元素颠倒顺序,返回逆序的数组.在原先的数组中重新排列. ③sort() 改变原数组 将数组中的元素排序并返回排序后的数组,当不带参数调用时,数组元素以字母表顺序排序.可以用以下代码将排序按照数值排序: var arr6_5 = [33,2,4,111]; console.log(arr6_5.sort(function(a,b){return a-b})

CSS权威指南学习笔记系列(1)CSS和文档

题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对,请谅解和指出.谢谢大家.正文: 第一章 CSS和文档---------- 1.CSS,称为层叠样式表.使用CSS的理由有:a.易于使用,样式表能大大减少Web创作人员的工作量:b.在多个页面上使用样式,可以创建一个样式表,然后把这个样式表应用到多个页面:c.层叠,CSS还规定了冲突规则:这些规则统称

MongoDB权威指南学习笔记4---查询相关的知识点

1 find find({查询条件},{"key":1,"email":1})  后面表示返回哪些键 2 可用的比较操作符 $lt , $lte,$gt,$gte 比如db.users.find({"age":{"$gte":18,"$lte":30}}) 3不等于 find(...{"key":{"$ne":"value"}} 4 in find

《Javascript权威指南》学习笔记之十一：处理字符串---String类和正则表达式

一.正则表达式的基本语法 1.概念:正则表达式由普通字符和特殊字符(元字符)组成的文本模式,该模式描述在查找字符串主体时待匹配的一个或者多个字符串.正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配. 普通字符包括所有的大小写字母字符.所有数字.所有标点符号及一些特殊符号.普通字符本身可以组成一个正则表达式,也可以和元字符组合组成一个正则表达式:而元字符则具有特殊的含义,包括().[].{}./.^.$.*.+.?...|.-.?:.?=.?! 2.基本语法 3.优先权含义 二.使用

css权威指南学习笔记--第七章

由于之前一直没有系统的看过css相关的书籍,导致自己css方面一直都是处于零散状态.知其然,不知其所以然.所以买了<css权威指南>.虽然比较老了,但是应该也会收获很大. 1 水平方向上 margin-left +border-left+padding-left+width+padding-right+border-right+margin-right 其中红色的是可以设置为auto,当设置为auto时,浏览器会自动计算该值.基于的原则就是 外层包裹容器的width=被包裹元素的width+p

《JavaScript权威指南》学习笔记之二十---XMLHttpRequest和AJAX解决方案

一.AJAX概述 AJAX是Asynchronous JavaScript and XML的缩写,中文译作异步JavaScript和XML.AJAX 不是新的编程语言,而是一种使用现有标准的新方法,在不重新加载页面的情况下,与服务器交换数据并更新部分网页的艺术.其核心是:客户端的Javascript能够与web服务器进行异步数据交换. 二.AJAX基础---XMLHttpRequest对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHt