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);

复制代码

设置dataType为textpost

dataType: 'text'
复制代码

ajax内部将返回的数据处理成了dataType类型.