第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>

<form>
 	用户名：<input type="text" name="user" />
 	邮件：<input type="text" name="email" />
 	<input type="button" value="提交" />
 </form>
 <div id="box"></div>
 -->
 <form>
 	用户名：<input type="text" name="user" />
 	邮件：<input type="text" name="email" />
 	<input type="radio" name="sex" value="男" />男
 	<input type="radio" name="sex" value="女" />女
 	<input type="button" value="提交" />
 </form>
 <div id="box"></div>
</body>
</html>

test.php

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

user.php

<?php
	echo $_POST['user'].'-'.$_POST['email']
?>

demo.js

$(function(){
	/*
	$('input').click(function(){
		$.ajax({
			type:'POST',
			url:'test.php',
			data:{
				url:'onestopweb'
			},
			success:function(response,status,xhr){
				$('#box').html(response);
			}
		});
	});
	
	$('form input[type=button]').click(function(){
		$.ajax({
			type:'POST',
			url:'user.php',
			data:{
				user:$('form input[name=user]').val(),
				email:$('form input[name=email]').val()
			},
			success:function(response,status,xhr){
				$('#box').html(response);
			}
		});
	});
	//表单元素特别多的情况下，写起来非常麻烦，容易出错
	//复制提交的 JS 内容时， data 属性需要修改的非常多
	
	$('form input[type=button]').click(function(){
		$.ajax({
			type:'POST',
			url:'user.php',
			data:$('form').serialize(),
			success:function(response,status,xhr){
				$('#box').html(response);
			}
		});
	});
	alert($('form').serialize());//字符串形式的键值对，并且还对 URL 进行的编码
		
	$('form input[name=sex]').click(function(){
		//$('#box').html($(this).serialize());
		$('#box').html(decodeURIComponent($(this).serialize()));
	});	
		
	$('form input[name=sex]').click(function(){
		//console.log($(this).serializeArray());
		var json = $(this).serializeArray();
		$('#box').html(json[0].name +'='+json[0].value);
	});
		
	//初始化重复的属性
	$.ajaxSetup({
		type:'POST',
		url:'user.php',
		data:$('form').serialize()
	});
	
	$('form input[type=button]').click(function(){
		$.ajax({
			success:function(response,status,xhr){
				$('#box').html(response);
			}
		});
	});
	
	
	*/
	
	$('form input[type=button]').click(function(){
		$.ajax({
			type:'POST',
			url:'user.php',
			data:$.param({
				user:$('form input[name=user]').val(),
				email:$('form input[name=email]').val()
			}),
			success:function(response,status,xhr){
				$('#box').html(response);
			}
		});
	});
	
	alert($.param({
		user:$('form input[name=user]').val(),
		email:$('form input[name=email]').val()
	}));
});

猜你喜欢