JQuery學習筆記——Ajax全接觸：Ajax語法,JSON ,跨域等問題

阿新 • • 發佈：2019-01-06

1、$("div").ajax();

$(document).ready(function(){
  $("#b01").click(function(){
      htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
      $("#myDiv").html(htmlobj.responseText);
  });
});

2、JSON與XML對比

· json的長度和xml格式比起來很短小
· json讀寫速度更快
· json可以使用JavaScript內建的方法直接進行解析，轉換成JavaScript物件，非常方便
 （所以使用Ajax時基本上都採用json傳遞資料，很少使用XML）

3、JSON的語法規則

· JSON資料的書寫格式是：名稱、值對
    
    名稱/值對組合中的名稱寫在前面（在雙引號中），值對寫在後面（同樣在雙引號中），中間用冒號隔開：比如 "name":"郭靖"
· JSON的值可以是下面這些型別
    
    數字（整數或者浮點數），比如 123,1.23
    字串（在雙引號中）
    邏輯值（true或false）
    陣列（在方括號中）
    物件（在花括號中）
    null
· JSON語法規則示例
    {
        "staff":[
            {"name":"洪七","age":70},
            {"name":"郭靖","age":35}, 
            {"name":"黃蓉","age":30}
        ]
    }

4、JSON解析

· eval和JSON.parse
· 在程式碼中使用eval函式是非常危險的！特別是用它執行第三方的JSON資料（其中可能包含有惡意程式碼）時，儘可能使用JSON.parse()方法解析字串本身，該方法還可以捕捉JSON中的語法錯誤
示例

· eval方法
    var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃    蓉","age":30}]}'; 
    var jsonobj = eval('('+jsondata+')');alert(jsonobj.staff[0].name);
· parse方法
    var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}'; 
    var jsonobj = JSON.parse(jsondata);alert(jsonobj.staff[0].name);

區別：
· eval方法：不看字串是否合法，還會解析字串中的方法
    var jsondata = '{"staff":[{"name":"洪七","age":alert(123)},{"name":"郭靖","age":35},{"name":"黃    蓉","age":30}]}'; 
    var jsonobj = eval('('+jsondata+')');alert(jsonobj.staff[0].name);
//函式會先彈出123，再彈出洪七
· JSON.parse()方法：若字串中有方法，會丟擲錯誤
    var jsondata = '{"staff":[{"name":"洪七","age":alert(123)},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}'; 
    var jsonobj = JSON.parse(jsondata);alert(jsonobj.staff[0].name);

5、JSON字串格式化和校驗工具：JSONLint

6、Ajax原生JS實戰程式碼

客戶端

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
	font-size: 28px;
	line-height:1.7;
}
</style>	
</head>

<body>

<h1>員工查詢</h1>

<label>請輸入員工編號：</label>
<input type="text" id="keyword" />
<button id="search">查詢</button>
<p id="searchResult"></p>

<h1>員工新建</h1>
<label>請輸入員工姓名：</label>
<input type="text" id="staffName" /><br>
<label>請輸入員工編號：</label>
<input type="text" id="staffNumber" /><br>
<label>請選擇員工性別：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>請輸入員工職位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">儲存</button>
<p id="createResult"></p>

<script>
document.getElementById("search").onclick = function() { 
	var request = new XMLHttpRequest();
	request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
	request.send();
	//獲取伺服器上readystate屬性的改變，當他變為4的話說明請求結束
	request.onreadystatechange = function(){
		if(request.readyState === 4){
			if(request.status === 200){
				document.getElementById("searchResult").innerHTML = request.response
			}else{alert("發生錯誤"+request.status)};
		}
	}
}

document.getElementById("save").onclick = function() { 
	var request = new XMLHttpRequest();
	request.open("POST", "server.php");
	var data = "name="+document.getElementById("staffName").value+"&number="+document.getElementById("staffNumber").value+"&sex="+document.getElementById("staffSex").value+"&job="+document.getElementById("staffJob").value+
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	request.send(data);
	//獲取伺服器上readystate屬性的改變，當他變為4的話說明請求結束
	request.onreadystatechange = function(){
		if(request.readyState === 4){
			if(request.status === 200){
				document.getElementById("createResult").innerHTML = request.response
			}else{alert("發生錯誤"+request.status)};
		}
	}
}

{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age"：35},{"name":"黃蓉","age"：30}]}
	
	
</script>
</body>
</html>

伺服器端

<?php
//設定頁面內容是html編碼格式是utf-8
header("Content-Type: text/plain;charset=utf-8"); 
//header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 

//定義一個多維陣列，包含員工的資訊，每條員工資訊為一個數組
$staff = array
	(
		array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"),
		array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"),
		array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理")
	);

//判斷如果是get請求，則進行搜尋；如果是POST請求，則進行新建
//$_SERVER是一個超全域性變數，在一個指令碼的全部作用域中都可用，不用使用global關鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
	search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
	create();
}

//通過員工編號搜尋員工
function search(){
	//檢查是否有員工編號的引數
	//isset檢測變數是否設定；empty判斷值為否為空
	//超全域性變數 $_GET 和 $_POST 用於收集表單資料
	if (!isset($_GET["number"]) || empty($_GET["number"])) {
		echo "引數錯誤";
		return;
	}
	//函式之外宣告的變數擁有 Global 作用域，只能在函式以外進行訪問。
	//global 關鍵詞用於訪問函式內的全域性變數
	global $staff;
	//獲取number引數
	$number = $_GET["number"];
	$result = "沒有找到員工。";
	
	//遍歷$staff多維陣列，查詢key值為number的員工是否存在，如果存在，則修改返回結果
	foreach ($staff as $value) {
		if ($value["number"] == $number) {
			$result = "找到員工：員工編號：" . $value["number"] . "，員工姓名：" . $value["name"] . 
			                  "，員工性別：" . $value["sex"] . "，員工職位：" . $value["job"];
			break;
		}
	}
    echo $result;
}

//建立員工
function create(){
	//判斷資訊是否填寫完全
	if (!isset($_POST["name"]) || empty($_POST["name"])
		|| !isset($_POST["number"]) || empty($_POST["number"])
		|| !isset($_POST["sex"]) || empty($_POST["sex"])
		|| !isset($_POST["job"]) || empty($_POST["job"])) {
		echo "引數錯誤，員工資訊填寫不全";
		return;
	}
	//TODO: 獲取POST表單資料並儲存到資料庫
	
	//提示儲存成功
	echo "員工：" . $_POST["name"] . " 資訊儲存成功！";
}

7、Ajax+json使用原生JS實戰程式碼

客戶端

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
	font-size: 28px;
	line-height:1.7;
}
</style>	
</head>

<body>

<h1>員工查詢</h1>

<label>請輸入員工編號：</label>
<input type="text" id="keyword" />
<button id="search">查詢</button>
<p id="searchResult"></p>

<h1>員工新建</h1>
<label>請輸入員工姓名：</label>
<input type="text" id="staffName" /><br>
<label>請輸入員工編號：</label>
<input type="text" id="staffNumber" /><br>
<label>請選擇員工性別：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>請輸入員工職位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">儲存</button>
<p id="createResult"></p>

<script>
document.getElementById("search").onclick = function() { 
	//傳送Ajax查詢請求並處理
	var request = new XMLHttpRequest();
	request.open("GET", "service.php?number=" + document.getElementById("keyword").value);
	request.send();
	//獲取伺服器上readystate屬性的改變，當他變為4的話說明請求結束
	request.onreadystatechange = function(){
		if(request.readyState === 4){
			if(request.status === 200){
				var data = JSON.parse(request.responseText);
				if(data.success){
					document.getElementById("searchResult").innerHTML = data.msg;
				}else{
					document.getElementById("searchResult").innerHTML = "出現錯誤:"+data.msg;
				}
			}else{alert("發生錯誤"+request.status)};
		}
	}
}

document.getElementById("save").onclick = function() { 
	//傳送Ajax建立請求並處理
	var request = new XMLHttpRequest();
	request.open("POST", "service.php");
	var data ="name="+document.getElementById("staffName").value+
		"&number="+document.getElementById("staffNumber").value+
		"&sex="+document.getElementById("staffSex").value+
		"&job="+document.getElementById("staffJob").value;
	
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	request.send(data);
	//獲取伺服器上readystate屬性的改變，當他變為4的話說明請求結束
	request.onreadystatechange = function(){
		if(request.readyState === 4){
			if(request.status === 200){
				var data = JSON.parse(request.responseText);
				if(data.success){
					document.getElementById("createResult").innerHTML = data.msg;
				}else{
					document.getElementById("createResult").innerHTML = "出現錯誤:"+data.msg;
				}
			}else{alert("發生錯誤:"+request.status)};
		}
	}
}

	
</script>
</body>
</html>

伺服器端

<?php
//設定頁面內容是html編碼格式是utf-8
//header("Content-Type: text/plain;charset=utf-8"); 
header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 

//定義一個多維陣列，包含員工的資訊，每條員工資訊為一個數組
$staff = array
	(
		array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"),
		array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"),
		array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理")
	);

//判斷如果是get請求，則進行搜尋；如果是POST請求，則進行新建
//$_SERVER是一個超全域性變數，在一個指令碼的全部作用域中都可用，不用使用global關鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
	search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
	create();
}

//通過員工編號搜尋員工
function search(){
	//檢查是否有員工編號的引數
	//isset檢測變數是否設定；empty判斷值為否為空
	//超全域性變數 $_GET 和 $_POST 用於收集表單資料
	if (!isset($_GET["number"]) || empty($_GET["number"])) {
		echo '{"success":false,"msg":"引數錯誤"}';
		return;
	}
	//函式之外宣告的變數擁有 Global 作用域，只能在函式以外進行訪問。
	//global 關鍵詞用於訪問函式內的全域性變數
	global $staff;
	//獲取number引數
	$number = $_GET["number"];
	$result = '{"success":false,"msg":"沒有找到員工"}';
	
	//遍歷$staff多維陣列，查詢key值為number的員工是否存在，如果存在，則修改返回結果
	foreach ($staff as $value) {
		if ($value["number"] == $number) {
			$result ='{"success":true,"msg":
					"找到員工:員工編號:'.$value["number"].',員工姓名:'.$value["name"].
					',員工性別:'.$value["sex"].
					',員工職位:' . $value["job"].'"}';
			//$result = '{"success":true,"msg":
//					"找到員工：員工編號：' . $value["number"] . 
//							'，員工姓名：' . $value["name"] . 
//							'，員工性別：' . $value["sex"] . 
//							'，員工職位：' . $value["job"] . '"}';
			break;
		}
	}
    echo $result;
}

//建立員工
function create(){
	//判斷資訊是否填寫完全
	if (!isset($_POST["name"]) || empty($_POST["name"])
		|| !isset($_POST["number"]) || empty($_POST["number"])
		|| !isset($_POST["sex"]) || empty($_POST["sex"])
		|| !isset($_POST["job"]) || empty($_POST["job"])) {
		echo '{"success":false,"msg":"引數錯誤，員工資訊填寫不全"}';
		return;
	}
	//TODO: 獲取POST表單資料並儲存到資料庫
	
	//提示儲存成功
	echo '{"success":true,"msg":"員工:'.$_POST["name"].'資訊儲存成功！"}';
}

8、用jQuery實現Ajax

· jQuery.ajax([settings])

·    type:型別，"POST"或"GET"，預設為"GET"
·    url:傳送請求的地址
·    data：是一個物件，連同請求一起傳送到伺服器
·    dataType:預期伺服器返回的資料型別。如果不指定，jQuery將自動根據HTTP包MIME資訊來智慧判斷，一般我們採用json格式，可以設定為"json"
·    success：是一個方法，請求成功後的回撥函式。傳入返回後的資料，以及包含成功程式碼的字串
·    error:是一個方法，請求失敗後呼叫此函式。傳入XMLHttpRequest物件

客戶端示例程式碼

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
	font-size: 28px;
	line-height:1.7;
}
</style>
	<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>

<h1>員工查詢</h1>

<label>請輸入員工編號：</label>
<input type="text" id="keyword" />
<button id="search">查詢</button>
<p id="searchResult"></p>

<h1>員工新建</h1>
<label>請輸入員工姓名：</label>
<input type="text" id="staffName" /><br>
<label>請輸入員工編號：</label>
<input type="text" id="staffNumber" /><br>
<label>請選擇員工性別：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>請輸入員工職位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">儲存</button>
<p id="createResult"></p>

<script>
//GET請求
$(document).ready(function(){
	$("#search").click(function(){
		$.ajax({
			type:"GET",
			url:"service.php?number=" + $("#keyword").val(),
			dataType:"json",
			success:function(data){
				if(data.success){
					$("#searchResult").html(data.msg);
				}else{
					$("#searchResult").html("出現錯誤:"+data.msg);
				}
			},
			error:function(jqXHR){
				alert("發生錯誤"+jqXHR.status)
			}
			
		})
	})	
})
//POST請求
$(document).ready(function(){
	$("#save").click(function(){
		$.ajax({
			type:"POST",
			url:"service.php",
			dataType:"json",
			data:{
				name:$("#staffName").val(),
				number:$("#staffNumber").val(),
				sex:$("#staffSex").val(),
				job:$("#staffJob").val(),
			},
			success:function(data){
				if(data.success){
					$("#searchResult").html(data.msg);
				}else{
					$("#searchResult").html("出現錯誤:"+data.msg);
				}
			},
			error:function(jqXHR){
				alert("發生錯誤"+jqXHR.status)
			}
			
		})
	})	
})

	
</script>
</body>
</html>

伺服器端全部程式碼

<?php
//設定頁面內容是html編碼格式是utf-8
//header("Content-Type: text/plain;charset=utf-8"); 
header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 

//定義一個多維陣列，包含員工的資訊，每條員工資訊為一個數組
$staff = array
	(
		array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"),
		array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"),
		array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理")
	);

//判斷如果是get請求，則進行搜尋；如果是POST請求，則進行新建
//$_SERVER是一個超全域性變數，在一個指令碼的全部作用域中都可用，不用使用global關鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
	search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
	create();
}

//通過員工編號搜尋員工
function search(){
	//檢查是否有員工編號的引數
	//isset檢測變數是否設定；empty判斷值為否為空
	//超全域性變數 $_GET 和 $_POST 用於收集表單資料
	if (!isset($_GET["number"]) || empty($_GET["number"])) {
		echo '{"success":false,"msg":"引數錯誤"}';
		return;
	}
	//函式之外宣告的變數擁有 Global 作用域，只能在函式以外進行訪問。
	//global 關鍵詞用於訪問函式內的全域性變數
	global $staff;
	//獲取number引數
	$number = $_GET["number"];
	$result = '{"success":false,"msg":"沒有找到員工"}';
	
	//遍歷$staff多維陣列，查詢key值為number的員工是否存在，如果存在，則修改返回結果
	foreach ($staff as $value) {
		if ($value["number"] == $number) {
			$result ='{"success":true,"msg":
					"找到員工:員工編號:'.$value["number"].',員工姓名:'.$value["name"].
					',員工性別:'.$value["sex"].
					',員工職位:' . $value["job"].'"}';
			//$result = '{"success":true,"msg":
//					"找到員工：員工編號：' . $value["number"] . 
//							'，員工姓名：' . $value["name"] . 
//							'，員工性別：' . $value["sex"] . 
//							'，員工職位：' . $value["job"] . '"}';
			break;
		}
	}
    echo $result;
}

//建立員工
function create(){
	//判斷資訊是否填寫完全
	if (!isset($_POST["name"]) || empty($_POST["name"])
		|| !isset($_POST["number"]) || empty($_POST["number"])
		|| !isset($_POST["sex"]) || empty($_POST["sex"])
		|| !isset($_POST["job"]) || empty($_POST["job"])) {
		echo '{"success":false,"msg":"引數錯誤，員工資訊填寫不全"}';
		return;
	}
	//TODO: 獲取POST表單資料並儲存到資料庫
	
	//提示儲存成功
	echo '{"success":true,"msg":"員工:'.$_POST["name"].'資訊儲存成功！"}';
}

9、跨域問題

·    當協議，子域名，主域名，埠號中任意一個不相同時，都算作不同域
·    不同域之間互相請求資源，就算做跨域
     比如：http:www.abc.con/index.html 請求 http://www.efg.com/service.php

跨域

·    JavaScript出於安全方面的考慮，不允許跨域呼叫其他頁面的物件。什麼是跨域呢？簡單的理解就是因為JavaScript同源策略的限制，a.com域名下js無法操作b.com或者是c.a.com域名下的物件

示例

·    www.abc.com/index.html呼叫www.abc.com/service.php (非跨域)
·    www.abc.com/index.html呼叫www.efg.com/service.php (跨域)
·    www.abc.com/index.html呼叫www.abc.com/service.php (跨域)
·    www.abc.com/index.html呼叫bbb.abc.com:81/service.php (跨域)
·    www.abc.com/index.html呼叫https://www.abc.com/service.php (跨域)

9.1 處理跨域方法一——代理

·    通過在同域名的web伺服器端建立了一個代理：
·    北京伺服器（域名為：www.beijing.com）
     上海伺服器（域名為：www.shanghai.com）
·    比如在北京的web伺服器後臺（www.beijing.com/proxy-shanghaiservice.php）來
     呼叫上海的伺服器的（www.shanghai.com/service.php）的服務，
     然後將響應結果傳遞給前端，這樣前端呼叫北京同域名的服務和呼叫上海的服務效果相同

9.2 處理跨域方法二——JSONP——主要用於解決主流瀏覽器的跨域資料訪問的問題（只支援GET請求）

在www.aaa.com頁面中(宣告方法)
<script>
function jsonp(json){
    alert(json["name"]);
}
</script>
<script src="http://www.bbb.com/jsonp.js"></script>
在www.bbb.com頁面中（呼叫方法）
jsonp({'name':'洪七'，'age':24});

客戶端程式碼改造（JQ）

$(document).ready(function(){
	$("#search").click(function(){
		$.ajax({
			type:"GET",
			url:"http://127.0.0.1:8080/ajaxdemo/jqservice.php?number=" + $("#keyword").val(),
			dataType:"jsonp",   //dataType 由json修改為jsonp
			jsonp:'callback',    //新增jsonp屬性，"callback為函式名"
			success:function(data){
				if(data.success){
					$("#searchResult").html(data.msg);
				}else{
					$("#searchResult").html("出現錯誤:"+data.msg);
				}
			},
			error:function(jqXHR){
				alert("發生錯誤"+jqXHR.status)
			}
			
		})
	})	
})

伺服器端程式碼改造

function search(){
	$jsonp=$_GET["callback"];   //在函式中增加該語句
	//檢查是否有員工編號的引數
	//isset檢測變數是否設定；empty判斷值為否為空
	//超全域性變數 $_GET 和 $_POST 用於收集表單資料
	if (!isset($_GET["number"]) || empty($_GET["number"])) {
		echo '{"success":false,"msg":"引數錯誤"}';
		return;
	}
	//函式之外宣告的變數擁有 Global 作用域，只能在函式以外進行訪問。
	//global 關鍵詞用於訪問函式內的全域性變數
	global $staff;
	//獲取number引數
	$number = $_GET["number"];
	$result = $jsonp.'({"success":false,"msg":"沒有找到員工"})';
	
	//遍歷$staff多維陣列，查詢key值為number的員工是否存在，如果存在，則修改返回結果
	foreach ($staff as $value) {
		if ($value["number"] == $number) {
			$result =$jsonp.'({"success":true,"msg":
					"找到員工:員工編號:'.$value["number"].',員工姓名:'.$value["name"].
					',員工性別:'.$value["sex"].
					',員工職位:' . $value["job"].'"})';
			//$result = '{"success":true,"msg":
//					"找到員工：員工編號：' . $value["number"] . 
//							'，員工姓名：' . $value["name"] . 
//							'，員工性別：' . $value["sex"] . 
//							'，員工職位：' . $value["job"] . '"}';
			break;
		}
	}
    echo $result;
}

9.3 處理跨域方法三——XHR2

·    HTML5提供的XMLHttpRequest Levels已經實現了跨域訪問以及一些其他的新功能
·    IE10以下的版本都不支援(所以如果忽略IE可以使用該方法)
·    在伺服器端做一些小小的改造即可
     header('Access-Control-Allow-Origin:*');
     header('Access-Control-Allow-Methods:POST,GET');

程式碼改動

//客戶端不需要任何的改動
//伺服器端在頭部加上下面兩行程式碼即可
     header('Access-Control-Allow-Origin:*');
     header('Access-Control-Allow-Methods:POST,GET');

JQuery學習筆記——Ajax全接觸：Ajax語法,JSON ,跨域等問題

1、$("div").ajax(); $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquery/test1.txt",async:false}); $(

Java Web 學習筆記之十二：JBoss RestEasy處理跨域OPTIONS請求方式

跨域請求問題前提前後端分離的B/S架構系統前後端獨立開發，後端採用JBoss restEasy 框架搭建restful服務後端程式碼開發完成並且部署在某一臺測試機上前端開發過程中，需

jQuery學習筆記（3）之Ajax下

二. 請求伺服器資料前面介紹的是如何在HTML頁面中載入非同步資料的方法，即如何從伺服器上取得靜態的資料。但頁面的應用遠不僅侷限於此，Ajax技術最終體現在與伺服器的動態資料實現人機互動中，即客戶端傳遞帶有引數的請求，伺服器接收後，分析所傳遞來的請求，並做出相應的響應，傳送對應資料至客

jQuery學習筆記（2）之Ajax上

前言： Ajax是Asynchronous JavaScript and XML的縮寫，其核心是通過XMLHttpRequest物件，以一種非同步的方式，向伺服器傳送資料請求，並通過該物件接收請求返回的資料，從而完成人機互動的資料操作。在jQuery中，有大量的函式和方法為Ajax技術提供支

JSP學習筆記（一）：JSP語法和指令

沒有文件的 encoding 引入 2.0 .cn name blog .get 一、語法 1、腳本程序的語法格式：　　腳本程序可以包含任意量的Java語句、變量、方法或表達式，只要它們在腳本語言中是有效的。 <% 代碼片段 %> 2、中文編碼問題　　

java學習筆記（四）：import語法

employee sign cnblogs java 調用變量賦值 temp 職位求職 Import 語法是給編譯器尋找特定類的適當位置的一種方法。創建一個Employee 類，包括四個實體變量姓名（name），年齡（age），職位（designation）和薪水（s

SpringBoot學習筆記（5）：處理前端JSON返回的日期的格式

處理 date() ring row 學習筆記 post 直觀 val rtt SpringBoot學習筆記（4）：處理前端JSON返回的日期的格式問題描述　　前端頁面顯示的時間為毫秒格式，不利於直觀顯示！解決方法1——後端解決 public class Flow

Python學習筆記（一）：基礎語法、變數型別、運算子（快速入門篇）

Head First Python、Python基礎教程下劃線的特殊意義以下劃線開頭的識別符號是有特殊意義的。以單下劃線開頭（_foo）的代表不能直接訪問的類屬性，需通過類提供的介面進行訪問，不能用”from xxx import *”而匯入

Ajax全接觸筆記

CP 關鍵詞忘記擁有 info win width 網絡完成 ~ 同步——客戶端發起請求，服務端需要處理，響應，此時客戶端完全等待，當服務器處理完畢，客戶端重新載入頁面，如果出現錯誤，再次發生請求，處理，等待... ~ 異步——填寫表單時，頁面當時就把數據發送到服務

學習筆記（2）：模擬登陸抽屜網（ajax）

import requests ''' 目的：模擬登陸抽屜網工具：python3 所用模組：requests ----->模擬瀏覽器的請求，並且得到返回訊息 ''' # 1.登陸地址的獲取： # 抽屜網的登陸頁面並不是重新整理整個頁面，屬於ajax區域性請求，要首先

JQuery學習筆記——Ajax

1、Ajax——在不過載全部頁面的情況下實現部分頁面的更新 (非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）) load() 方法是簡單但強大的 AJAX 方法。 load() 方法從伺

SpringBoot 2.x 學習筆記（5）：ECharts+AJAX實現非同步資料載入

1、JavaBean package cn.hadron.eba.bean; import java.io.Serializable; public class UserBean implements Serializable{ private String usernam

jQuery學習筆記之ajax

先看一個例子： function chageDistrict(obj){ var districtArray = obj.id.split('_'); var homeOrCompany = di

React Ajax JQuery 學習筆記

React 和 JQuery 都是JavaScript 的庫。React 提供了prop 和state 的生命週期形式，JQuery 完成了常用功能的封裝。兩者側重不同，常常結合使用。Ajax 是跨語言的一種規範，它規定了網路非同步通訊的方式。用React 和 JQuery

javascript學習筆記（二）：定義函數、調用函數、參數、返回值、局部和全局變量

兩個 cnblogs bsp 結果 value ava ase com 調用定義函數、調用函數、參數、返回值關鍵字function定義函數，格式如下： function 函數名(){ 函數體 } 調用函數、參數、返回值的規則和c語言規則類似。 1 <!DOC

jQuery學習筆記：基礎

本文主要總結jQuery中一些知識點概念美元符號$是著名的jQuery符號。jQuery把所有功能全部封裝在一個全域性變數jQuery中，而$也是一個合法的變數名，它是變數jQuery的別名 $本質上就是一個函式，但是函式也是物件，於是$除了可以直接呼叫外，也可以有很多其他屬性選擇器層級選擇

【JQuery】JQuery學習筆記：JQuery操作HTML，即JQuery DOM操作

1，jQuery DOM操作，設定或獲得內容：設定，在（）內填入內容即可，有回撥函式； text() - 設定或返回所選元素的文字內容 html() - 設定或返回所選元素的內容（包括 HTML 標記） val() - 設定或返回表單欄位的值 2，jQuery D

ExtJS5.1學習筆記9——Ext中的Ajax請求

下面的程式碼展示了在Ext中使用Ajax的方法：首先是html檔案的程式碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 下面是三個必

【知了堂學習筆記】利用js、ajax實現遍歷行傳參

在網頁中遍歷出來的每行都有一個select，怎麼才能將對應select選中的內容傳遞到各行對應的編輯（a標籤）內，點選後將引數內容傳遞到servlet中，進行操作。實現效果圖如下：思路：將每行的材料編號除了給材料編號那一列顯示之外，同樣也賦給調入倉庫和編輯標籤，用於區分每行不同的下拉框和a標籤。通過

AngularJS學習筆記（3）——通過Ajax獲取JSON資料

通過Ajax獲取JSON資料以我之前寫的與使用者互動的動態清單列表為例，使用JSON前todo.html程式碼如下： <!DOCTYPE html> <html ng-app="todoApp"> <head>

JQuery學習筆記——Ajax全接觸：Ajax語法,JSON ,跨域等問題

1、$("div").ajax();

2、JSON與XML對比

3、JSON的語法規則

4、JSON解析

5、JSON字串格式化和校驗工具：JSONLint

6、Ajax原生JS實戰程式碼

7、Ajax+json使用原生JS實戰程式碼

8、用jQuery實現Ajax

9、跨域問題

相關推薦