新しい機能を追加する必要があり、間違いなくjQuery AJAXを使用し、作業経験が不足しており、値とdataTypeタイプを取得するのに問題があります
学習を追体験:
html()メソッド:
html()メソッドは、選択した要素(内部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属性を介して設定されます。このメソッドは、主に入力要素に使用されます。メソッドがパラメータを設定しない場合、選択された要素の現在の値を返します。
<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
タイプ:文字列
サーバーが返すと予想されるデータのタイプ。指定しない場合、jQueryはHTTPパッケージのMIME情報に基づいてインテリジェントな判断を自動的に行います。たとえば、XMLMIMEタイプはXMLとして認識されます。1.4では、JSONはJavaScriptオブジェクトを生成し、スクリプトはスクリプトを実行します。次に、サーバーから返されたデータがこの値に従って解析され、コールバック関数に渡されます。使用可能な値:
- "xml":jQueryで処理できるXMLドキュメントを返します。
- "html":プレーンテキストのHTML情報を返します。含まれているスクリプトタグは、domが挿入されたときに実行されます。
- "script":プレーンテキストのJavaScriptコードを返します。結果は自動的にキャッシュされません。「キャッシュ」パラメータが設定されていない限り。注:リモートで(同じドメインの下ではなく)リクエストする場合、すべてのPOSTリクエストはGETリクエストに変換されます。(DOMのスクリプトタグがロードに使用されるため)
- "json":JSONデータを返します。
- 「jsonp」:JSONP形式。「myurl?callback =?」などのJSONPの形式で関数を呼び出すと、jQueryは自動的に?を正しい関数名に置き換えてコールバック関数を実行します。
- "text":プレーンテキストの文字列を返します
ajax内の属性では大文字と小文字が区別され、データ型を使用することは書き込みを行わないこととほぼ同じであり、デフォルトの戻り値の型は文字列です。