需要新增功能，肯定用到jQuery AJAX 工作经验不足 在 获取值和dataType 类型上栽了跟头
重温学习：
html() 方法：
html() 方法返回或设置被选元素的内容 (inner HTML)。如果该方法未设置参数，则返回被选元素的当前内容。
<html>
<head>
<script type="text/javascript">
//测试 控制台中输出的结果：
$(function () {
console.log("ready执行");
});
$(function() {
console.log("ready1执行");
});
window.onload = function () {
console.log('load执行');
};
window.onload = function () {
console.log('load1执行');
}
/**
* ready执行
ready1执行
load1执行
*/
/**
* 这里可以看出两点不同：
1.$(function(){})不会被覆盖，而window.onload会被覆盖，
个人感觉$(function(){})不会被覆盖的原因是将其放入到了一个队列中，在对应时机一次出队。
2. $(function(){})在window.onload执行前执行的，
$(function(){})类似于原生 js 中的DOMContentLoaded事件，
在 DOM 加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。
DOM 文档加载步骤：
解析 HTML 结构
加载外部的脚本和样式文件
解析并执行脚本代码
执行 $(function(){}) 内对应代码
加载图片等二进制资源
页面加载完毕，执行 window.onload
*/
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">改变 p 元素的内容</button>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
/**
* 页面自动加载方法
* JQuery 的代码我们通常会包裹在一个$(function(){})函数中，
* jq 的$(function(){})也就是$(document).ready(function(){})的简写，
* 与之对应的原生 js 的 window.onload事件
*/
$(document).ready(function(){
});
$(function(){
});
$(function(){
//html()
(1)设置所有 p 元素的内容：
$(".btn1").click(function(){
$("p").html("Hello <b>world!</b>");
});
(2)返回元素内容,当使用该方法返回一个值时，它会返回第一个匹配元素的内容。
$(".btn1").click(function(){
alert($("p").html());
});
(3)设置元素内容,当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。
$(".btn1").click(function(){
$("p").html("Hello <b>world!</b>");
});
$("button").click(function(){
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
});
</script>
</body>
</html>
val()
val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值。
<html>
<head>
</head>
<body>
//1
<p>Name: <input type="text" name="user" value="Hello World" /></p>
<button>改变文本域的值</button>
//2
Firstname: <input type="text" name="fname" value="Bill" /><br />
Lastname: <input type="text" name="lname" value="Gates" /><br /><br />
<button>获得第一个文本域的值</button>
//3
<p>Name: <input type="text" name="user" /></p>
<button>设置文本域的值</button>
//4
<p>Name: <input type="text" name="user" value="Bill" /></p>
<button>设置文本域的值</button>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//val()
(1)设置输入域的值：
$("button").click(function(){
$(":text").val("Hello Kitty");
});
(2)返回 Value 属性,返回第一个匹配元素的 value 属性的值。
$("button").click(function(){
alert($("input:text").val());
});
(3)设置 Value 属性的值。
$("button").click(function(){
$("input:text").val("Bill Gates");
});
(4)使用函数设置 Value 属性的值
/**
* function(index,oldvalue) 规定返回要设置的值的函数。
index - 可选。接受选择器的 index 位置。
oldvalue - 可选。接受选择器的当前 Value 属性。
*/
$("button").click(function(){
$("input:text").val(function(n,c){
return c + " Gates";
});
});
</script>
</body>
</html>
AJAX dataType
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
- "xml": 返回 XML 文档，可用 jQuery 处理。
- "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
- "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
- "json": 返回 JSON 数据 。
- "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
- "text": 返回纯文本字符串
ajax内部的属性区分大小写，使用datatype约等于没写，默认返回类型为string