第12章 Ajax（中）

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<input type="button" value="异步加载数据" />
<div id="box"></div>
</body>
</html>

test.html

<span class="title">一站式建网站</span>
<span class="url">onestopweb.cn</span>

test.php

<?php
	//echo '一站式建网站';
	/*
	if($_GET['url'] == 'onestopweb'){
		echo '一站式建网站';
	}else{
		echo '不存在';
	}
	if($_POST['url'] == 'onestopweb'){
		echo '一站式建网站';
	}else{
		echo '不存在';
	}
	
	*/
	if($_GET['url'] == 'onestopweb'){
		echo '一站式建网站';
	}else{
		echo '不存在';
	}
?>

test.xml

<?xml version="1.0" encoding="UTF-8"?>
<root>
	<url>www.onestopweb.cn</url>
</root>

test.json

[
	{
		"url":"www.onestopweb.cn"
	}
]

test.js

alert('我在被呼唤的情况下才被加载')

demo.js

$(function(){
	/*
	$('input').click(function(){
		$.get('test.php?url=onestopweb',function(response,status,xhr){
			$('#box').html(response);
		});
	});
	
	//通过直接在 url 问号紧跟传参
	$('input').click(function(){
		$.get('test.php','url=onestopweb&a=b',function(response,status,xhr){
			$('#box').html(response);
		});
	});
	//通过第二个参数 data，字符串形式的键值对传参，然后自动转换为问号紧跟传参
	
	$('input').click(function(){
		$.get('test.php',{
			url : 'onestopweb'
		},function(response,status,xhr){
			$('#box').html(response);
		});
	});
	//通过第二个参数 data，对象形式的键值对传参，然后自动转换为问号紧跟传参

	$('input').click(function(){
		$.post('test.php?url=onestopweb',function(response,status,xhr){
			$('#box').html(response);
		});
	});
	//post 提交不能使用问号传参

	$('input').click(function(){
		$.post('test.php','url=onestopweb&a=b',function(response,status,xhr){
			$('#box').html(response);
		});
	});
	//post 提交可以使用字符串形式的键值对传参，自动转换为 http 消息实体传参
	
	$('input').click(function(){
		$.post('test.php',{
			url : 'onestopweb'
		},function(response,status,xhr){
			$('#box').html(response);
		});
	});
	//post 提交可以使用对象键值对

	$('input').click(function(){
		$.post('test.php',{
			url : 'onestopweb'
		},function(response,status,xhr){
			$('#box').html(response);
		},'html');//PHP 文件返回的数据是纯文本，默认是 html 或 text
	});

	$('input').click(function(){
		$.post('test.php',{
			url : 'onestopweb'
		},function(response,status,xhr){
			$('#box').html(response);
		},'json');
	});
	//本身是纯文本，如果强行按照 xml 或者 json 数据格式返回的话，那么就无法获取数据

	$('input').click(function(){
		$.post('test.xml',function(response,status,xhr){
			alert(response);
		},'html');//默认 type 就已经是已经是xml
	});
	//如果默认已经是 xml,强行设置为 html,则会连 xml 标签也返回

	$('input').click(function(){
		$.post('test.json',function(response,status,xhr){
			alert(response[0].url);
		});
	});

	$('input').click(function(){
		$.getJSON('test.json',function(response,status,xhr){
			alert(response[0].url);
		});
	});

	*/
	
	$('input').click(function(){
		$.getScript('test.js');
	});
	
	
});

猜你喜欢