博客列表 >$.ajax()第一种用法.load()演示20180410

$.ajax()第一种用法.load()演示20180410

jobing的博客
jobing的博客原创
2018年04月12日 08:15:39578浏览

以下代码演示了$.ajax()第一种用法.load(),.load()可以从服务器端通过POST和GET请求分别获取相应的信息,与大家分享一下

HTML代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.ajax-load()</title>
</head>
<body>
	<img src="images/1.jpg" width="400">
	<div></div>
	<button>点击获取信息</button>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('button').eq(0).on('click',function(){
		$('div').eq(0)
		// 加载服务器中info的信息
		// post请求
		// .load('api/info.php',{type:'游戏',nation:"日本"})
		// get请求
		.load('api/info.php','num=224&aut=高桥和希',function(){
			$('img').css('border-radius','10%')
		}) 
	})

	
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

PHP代码:

实例

<h3>游戏王</h3>
<p>神卡:翼神龙、天空龙、巨神兵</p>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
	echo isset($_POST['type'])?'类型: '.$_POST['type'].'<br>' :'';
	echo isset($_POST['nation'])?'发行地: '.$_POST['nation'].'<br>' :'';
}

if ($_SERVER['REQUEST_METHOD'] == 'GET') {
	echo isset($_GET['num'])?'集数: '.$_GET['num'].'<br>' :'';
	echo isset($_GET['aut'])?'作者: '.$_GET['aut'].'<br>' :'';
}

?>

运行实例 »

点击 "运行实例" 按钮查看在线实例


效果图:

33.png22.png

总结:

本次主要学习了.load的使用,可以从服务器端获取指定的相关信息,还可以添加回调函数,使页面本身元素的属性发生变化,例如将原来图片的直角变为了圆角。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议