jquery的ajax應用

時間 2019-12-07

標籤 jquery ajax 應用欄目 JQuery 简体版

原文原文鏈接

客戶端代碼javascript

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery-ajax-request</title>
	<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
	<p id='para'></p>
	<script type="text/javascript">
		function load_content(data) {
			$('#para').html(data);
		}
		$(function () {
			//從服務端請求數據
			$.ajax({
			  url: "time.php",
			  success: function(res) {
			  	//設置到頁面上
			  	 load_content(res);
			  }
			});	
		})
	</script>
</body>
</html>
複製代碼

服務端代碼php

<?php 
echo time();
複製代碼

效果html

核心代碼很簡單java

$.ajax({
	url: "time.php",
	success: function(res) {
    }
});	
複製代碼

沒有傳遞請求方式jquery

查看network,發現默認是getajax

須要瞭解的json

發送get請求

客戶端:
$.ajax({
	type:'get',
	url: "time.php",
	data:{'foo':'bar'},
	success: function(res) {
	    //設置到頁面上
	    load_content(res);
	}
});	


服務端:
<?php 
var_dump($_GET['foo']);
echo time();
複製代碼

發送post請求

只須要將type修改爲post便可bash

type:'post'
複製代碼

dataType

決定從服務端請求到的數據格式,忽略服務端設置的app

$.ajax({
    url: "time.php",
    success: function(res) {
    //設置到頁面上
    console.log(typeof res);
    }
});	
//服務端設置返回數據類型爲json<?php 

header('Content-Type:application/json');

$arr = array('name' => '張三','age' => 18, 'weight' => 188.6);

echo json_encode($arr);

複製代碼