バグレコードログ2021.03.06

新しい機能を追加する必要があり、間違いなく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内の属性では大文字と小文字が区別され、データ型を使用することは書き込みを行わないこととほぼ同じであり、デフォルトの戻り値の型は文字列です。

 

 

 

おすすめ

転載: blog.csdn.net/c202003/article/details/114433888