当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

第13章 Ajax进阶(下)

发表于: 2015-07-16   作者:onestopweb   来源:转载   浏览:
摘要: 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/

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>
 <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>
 <span class="loading">正在加载中...</span>
 <div id="box"></div>
</body>
</html>

 

style.css

/* CSS Document */
.loading{display: none; color: #c00; font-weight: bold;}

 

user.php

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

 

test.json

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

 

jsonp.php

<?php
	$_arr = array('a'=>1,'b'=>2,'c'=>3);
	$_result = json_encode($_arr);
	echo $_result;

?>

 

test1.php

<?php
	echo 'test1.php';
?>

 

test2.php

<?php
	echo 'test2.php';
?>

 

demo.js

$(function(){
	/*
	$('form input[type=button]').click(function(){
		$.ajax({
			type:'POST',
			url:'test.json',
			success:function(response,status,xhr){
				alert(response[0].url);
			}
		});
	});
	
	$('form input[type=button]').click(function(){
		$.ajax({
			type:'POST',
			url:'test.json',
			dataType:'html',
			success:function(response,status,xhr){
				alert(response);
			}
		});
	});
	
	//本地获取 jsonp.php 文件,成功
	$('form input[type=button]').click(function(){
		$.ajax({
			type:'POST',
			url:'jsonp.php',
			dataType:'json',
			success:function(response,status,xhr){
				alert(response);
				alert(response.a);
			}
		});
	});
	
	$('form input[type=button]').click(function(){
		$.ajax({
			type:'POST',
			url:'user.php',
			data:$('form').serialize(),
			//只能显示第二个
			success:function(response,status,xhr){
				alert(response +'1');
			},
			success:function(response,status,xhr){
				alert(response+'2');
			}
		});
	});
	
	//jqXHR 就是 $.ajax() 返回的对象
	$('form input[type=button]').click(function(){
		var jqXHR = $.ajax({
			type:'POST',
			url:'user.php',
			data:$('form').serialize()
		});
		jqXHR.success(function(response){
			alert(response);
		});
	});
	
	//jqXHR 就是 $.ajax() 返回的对象
	$('form input[type=button]').click(function(){
		var jqXHR = $.ajax({
			type:'POST',
			url:'user.php',
			data:$('form').serialize()
		});
//		jqXHR.success(function(response){
//			alert(response);
//		});
		jqXHR.done(function(response){
			alert(response +'1');
		}).done(function(response){
			alert(response +'2');
		});
		
		jqXHR.done(function(response){
			alert(response +'3');
		});
	});
	
	//jqXHR 就是 $.ajax() 返回的对象
	$('form input[type=button]').click(function(){
		var jqXHR1 = $.ajax('test1.php');
		var jqXHR2 = $.ajax('test2.php');
		jqXHR1.done(function(response){
			alert(response);
		});
		jqXHR2.done(function(response){
			alert(response);
		});
		
	});
	
	//jqXHR 就是 $.ajax() 返回的对象
	$('form input[type=button]').click(function(){
		var jqXHR1 = $.ajax('test1.php');
		var jqXHR2 = $.ajax('test2.php');
		$.when(jqXHR1,jqXHR2).done(function(r1,r2){
			alert(r1[0]);
			alert(r2[0]);
		});
	});
	
	*/
});

 

 

 

第13章 Ajax进阶(下)

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
1、Swing概述   GUI(图形用户界面)为程序提供图形界面,最初的设计目的是为程序员构建一个通用
序列(流水号)管理菜单如下图,主要起多种数据库的兼容性主键生成、数据表的排序字段的生成、单据
序列(流水号)管理菜单如下图,主要起多种数据库的兼容性主键生成、数据表的排序字段的生成、单据
序列(流水号)管理菜单如下图,主要起多种数据库的兼容性主键生成、数据表的排序字段的生成、单据
  在ASP中,正则表达式的各项功能也是通过VBScript实现的。由于VBScript只是Visual Basic的子集,
代理模式(Proxy Pattern) ——.NET设计模式系列之十四 Terrylee,2006年5月 摘要:在软件系统中,
<!doctype html> <html> <head> <meta charset="utf-8"> <title><
index.hmtl <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF
剪贴板   在Windows操作系统中大量使用剪贴板使用户能够在同一应用程序之中或不同应用程序之间传
备注:这章内容相对介绍的比较简单,不过例子比较使用,主要是要掌握如果连接,使用数据库,并以SQLi
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号