<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>get方式</title>

	<style>

	.loading{

		color: red;

		font-size: 16px;

		display: inline-block;

		margin-top: 10px;

		font-family: "微软雅黑";

		display: none;

	}

	</style>

	<script src="jquery-1.8.1.js"></script>

	<script>

	$(document).ready(function(){

		// GET请求

		// 第一种

		// $('#btn').click(function(){

		// 	//alert(1);

		// 	$.get('test.php?url=baidu1', function(response, status, xhr){

		// 			//$('#div1').html(response); // 请求返回的内容

		// 			console.log(status); // 请求的状态 success / error

		// 			$('#div1').html(xhr.responseText); // 请求返回的内容

		// 	});	

		// 第二种

		// $('#btn').click(function(){

		// 	//alert(1);

		// 	// data 数据的等号两端没有空格

		// 	$.get('test.php', 'url=baidu', function(response, status, xhr){

		// 			$('#div1').html(response); // 请求返回的内容

		// 	});	

		// });

		// 第三种

		// $('#btn').click(function(){

		// 	//alert(1);

		// 	// data 数据用json的形式

		// 	$.get('test.php', {url: 'baidu'}, function(response, status, xhr){

		// 			$('#div1').html(response); // 请求返回的内容

		// 	});	

		// });

		// POST请求

		// POST 可以使用字符串形式的键值对传参, 自动转化为http消息实体传参

		// $('#btn').click(function(){

		// 	// data 数据用json的形式

		// 	$.post('test.php', 'url=baidu', function(response, status, xhr){

		// 		$('#div1').html(response); // 请求返回的内容

		// 	});	

		// });		

		// // 方法二

		// // post 可以使用对象键值对传参

		// $('#btn').click(function(){

		// 	// data 数据用json的形式

		// 	$.post('test.php', {url: 'baidu'}, function(response, status, xhr){

		// 		$('#div1').html(response); // 请求返回的内容

		// 	}, 'html');	

		// });

		// 方法二

		// post 可以使用对象键值对传参

		// $('#btn').click(function(){

		// 	// data 数据用json的形式

		// 	// $(response)[0].url

		// 	$.post('test.json', function(data){

		// 		//$('#div1').html(response); // 请求返回的内容

		// 		var html = '', $dom = $('#div1');

		// 		//alert($(response)[0].url);

		// 		//alert(data[0].url);

		// 		$.each(data, function(k, v){

		// 			//alert(v['url']);

		// 			html = $('<p>'+"请求的地址是："+v['url']+'</p>');

		// 			$dom.append(html);

		// 		});

		// 	});	

		// });

		// // getJSON()

		// // 请求的只能是JSON格式的, 没有第四个参数 type

		// $('#btn').click(function(){

		// 	$.getJSON('test.json', function(data){

		// 		//$('#div1').html(response); // 请求返回的内容

		// 		var html = '', $dom = $('#div1');

		// 		$.each(data, function(k, v){

		// 			//alert(v['url']);

		// 			html = $('<p>'+"请求的地址是："+v['url']+'</p>');

		// 			$dom.append(html);

		// 		});

		// 	});	

		// });

		// getScript()

		// 异步加载js文件

		// $('#btn').click(function(){

		// 	$.getScript('test.js');

		// });

		// $.ajax(); 只传一个参数

		// 最底层的一个方法

		// $('#btn').click(function(){

		// 	$.ajax({

		// 		type: 'POST',

		// 		url: 'test.php',

		// 		data: {url: 'baidu'},

		// 		success: function(response, status, xhr){

		// 			$('#div1').html(response);

		// 		}

		// 	});

		// });

		// ajax 表单序列化

		//

		// $('#btn1').click(function(){

		// 	$.ajax({

		// 		type: 'POST',

		// 		url: 'form.php',

		// 		data: {

		// 			user: $('input[name=user]').val(),

		// 			mail: $('input[name=mail]').val(),

		// 		},

		// 		success: function(response, status, xhr){

		// 			$('#div1').html(response);

		// 		}

		// 	});

		// });

		// 表单序列化

		// data: $('#form1').serialize()

		// $('#btn1').click(function(){

		// 	$.ajax({

		// 		type: 'POST',

		// 		url: 'form.php',

		// 		data: $('#form1').serialize(),

		// 		success: function(response, status, xhr){

		// 			$('#div1').html(response);

		// 		}

		// 	});

		// });

		// $('input[name=sex]').click(function(){

		// 	var value = $(this).serialize();

		// 	$('#div1').html(decodeURIComponent(value));

		// });

		// 还有一个可以返回JSON数据的方法

		// $('input[name=sex]').click(function(){

		// 	var value = $(this).serializeArray();

		// 	console.log(value);

		// 	$('#div1').html(value[0].name+'='+value[0].value );

		// 	//console.log(value);

		// 	//$('#div1').html(value);

		// 	//$('#div1').html(decodeURIComponent(value));

		// });

		// ajaxSetup(); 初始化重复属性

		// $('#btn1').click(function(){

		// 	$.ajax({

		// 		success: function(response, status, xhr){

		// 			//alert(response);

		// 			$('#div1').html(response);

		// 		}

		// 	})

		// });

		// $.ajaxSetup({

		// 	type: 'POST',

		// 	url: 'form.php',

		// 	data: $('#form1').serialize()

		// });

		// $.param(); 解对象键值对的

		// $('#btn1').click(function(){

		// 	$.ajax({

		// 		type: 'POST',

		// 		url: 'form.php',

		// 		data: $.param({

		// 			user: $('input[name=user]').val(),

		// 			mail: $('input[name=mail]').val(),

		// 		}),

		// 		success: function(response, status, xhr){

		// 			$('#div1').html(response);

		// 		}

		// 	});

		// });

		// $.ajaxStart() 请求开始时

		// $.ajaxStop() 请求结束时

		// $('#btn1').click(function(){

		// 	$.ajax({

		// 		type: 'POST',

		// 		url: 'form111.php',

		// 		data: $.param({

		// 			user: $('input[name=user]').val(),

		// 			mail: $('input[name=mail]').val(),

		// 		}),

		// 		success: function(response, status, xhr){

		// 			$('#div1').html(response);

		// 		},

		// 		//timeout: 200

		// 		//global: false

		// 		error: function(xhr, errorText, errorType){

		// 			 alert(errorText+':'+errorType);

		// 			//$('#div1').html(errorType);

		// 			//alert(xhr.status +':'+ xhr.statusText); //error : not found

		// 		}

		// 	});

		// });

		// $(document).ajaxStart(function(){

		// 	$('.loading').show();

		// }).ajaxStop(function(){

		// 	$('.loading').hide();

		// });

		//  post 请求错误的状态, 可以通过连缀.error()方法

		// $('#btn1').click(function(){

		// 	// data 数据用json的形式

		// 	$.post('test22.php', {url: 'baidu'}, function(response, status, xhr){

		// 		$('#div1').html(response); // 请求返回的内容

		// 	}).error(function(xhr, errorText, errorType){

		// 		 //alert(errorText+':'+errorType);

		// 		 //alert(xhr.status +':'+ xhr.statusText); //error : not found

		// 	});	

		// });

		// $.ajax 加载json文件

		// $('#btn1').click(function(){

		// 	$.ajax({

		// 		type: 'POST',

		// 		// 如果请求的是json文件, 那默认的返回的类型就不用再写json了.

		// 		url: 'test.json',

		// 		// 如果是html格式的话, 那会把json文件的格式都给输出

		// 		//dataType: 'html',

		// 		dataType: 'json',

		// 		success: function(data){

		// 			//alert(data[0].url);

		// 			alert(data[0].url);

		// 		}

		// 	});

		// });

		// ajax 跨域处理

		// $('#btn1').click(function(){

		// 	$.ajax({

		// 		type: 'POST',

		// 		url: 'jsonp.php',

		// 		dataType: 'json',

		// 		success: function(data){

		// 			//{"name":"json","age":24,"sex":"女"}

		// 			var html='', $dom = $('<table></table>'), $div = $('#div1');

		// 			$.each(data, function(){

		// 				//alert(data.name);

		// 				html = $('<tr><td>'+data.name+'</td><td>'+data.age+'</td><td>'+data.sex+'</td></tr>');

		// 				$div.append($dom.html(html));

		// 			});

		// 		}

		// 	});

		// });

		// ajax 跨域处理

		$('#btn1').click(function(){

			// $.ajax({

			// 	type: 'POST',

			// 	url: 'http://www.20160305.com:12000/jsonp.php',

			// 	dataType: 'json',

			// 	success: function(data){

			// 		alert(data.name);

			// 	}

			// });

			// $.getJSON('jsonp2.php?callback=?', function(data){

			// 	alert(data.name);

			// });

			//远程

			// $.getJSON('http://www.20160305.com:12000/jsonp2.php?callback=?', function(data){

			// 	alert(data.name);

			// });

			// ajax 获取远程数据

			// 第一种方法

			// $.ajax({

			// 	type: 'POST',

			// 	url: 'http://www.20160305.com:12000/jsonp2.php?callback=?',

			// 	dataType: 'json',

			// 	success: function(data){

			// 		alert(data.name);

			// 	}

			// });

			// 第二种方法

			$.ajax({

				type: 'POST',

				url: 'http://www.20160305.com:12000/jsonp2.php',

				dataType: 'jsonp',

				success: function(data){

					alert(data.name);

				}

			});

		});

	});

	</script>

</head>

<body>

	<form action="" id="form1">

		用户名: <input type="text" name="user" >

		邮箱: <input type="text" name="mail" >

		<input id="btn1" type="button" value="点击提交">

		<input type="radio" name="sex" value="男">男

		<input type="radio" name="sex" value="女">女

	</form>

	<!-- <input id="btn" type="button" value="点击按钮"> -->

	<div id="div1">

		<span class="loading">正在努力加载中......</span>

	</div>

</body>

</html>

　　

ajax 中的一些方法应用的更多相关文章

  1. ajax中的post方法中回调函数不执行的问题

    前一段时间接触了JQuery Ajax中的.post()方法和.get()方法,感觉到ajax的简洁和强大,当用到.post()方法时,去W3上查找相关的使用方法,感觉十分简单,用法很明了,然后,直接 ...

  2. jQuery ajax中使用serialize()方法提交表单数据示例

    <form id="form"> 输入账号 :<input id="name" type="text" name=&quo ...

  3. jQuery中的Ajax几种请求方法

    在网上查的几种Ajax的请求的方法: jQuery 确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯.废话少说,直接进入正题,我 ...

  4. 【转】Ajax中send方法参数的使用（get/post）

    Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : ...

  5. Ajax中send方法的使用

    Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : ...

  6. 用juery的ajax方法调用aspx.cs页面中的webmethod方法示例

    juery的ajax调用aspx.cs页面中的webmethod方法:首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性,具体实现如下,感兴趣的朋友可以参考下哈,希望对大 ...

  7. Ajax中Delete请求参数 后台无法获取的解决方法（Restful风格）

    方法一: 在ajax中写入data来传参时,直接把参数拼接到url后面 例如: $.ajax({ url: '/cyberspace/vrv/event/delete/1002?startTime=& ...

  8. C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  9. CI框架中，判断post,ajax,get请求的方法

    CI框架当中并没有提供,类似tp框架中IS_POST,IS_AJAX,IS_GET的方法. 所有就得我们自己造轮子了.下面就介绍一下,如何定义这些判断请求的方法.其实很简单的. 首先打开constan ...

随机推荐

  1. mac 下 parallels 虚拟机 ubuntuServer 安装 parallels tools

    mac 下 parallels 虚拟机 ubuntuServer 安装 parallels tools 1. 先点击ubuntu 虚拟机右下角的设置 -----安装 parallels tools - ...

  2. React添加事件

    定义个组件 组件首字母大写,调用: ReactDOM.render(<Hello></Hello>,document.getElementById('box'));

  3. onclick="test()"与onclick="return test()"的区别

    浏览器会对页面元素的某些操作产生默认行为比如a标签跳转,form表单的提交等如果是onclick="test()"则执行该函数,然后继续自己的默认行为 <a href=&qu ...

  4. 数据库中Schema（模式）概念的理解

    在学习SQL的过程中,会遇到一个让你迷糊的Schema的概念.实际上,schema就是数据库对象的集合,这个集合包含了各种对象如:表.视图.存储过程.索引等.为了区分不同的集合,就需要给不同的集合起不 ...

  5. javaSE之如何将一个文件复制到另一个文件

    /* * (1). 文件字符输入,输出流 * 文件字节输入,输出流的read和write方法使用 * 字节数组读写数据,即以字节为单位处理数据,因此,字节流不能很好的操作Unicode字符 * ,比如 ...

  6. Binary Tree Level Order Traversal II [LeetCode]

    Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...

  7. OC 实例变量(instance var)与属性(@property)的关系 isa指针

    实例变量(instance var)与属性(@property)的关系 Objective-C 2.0之后,声明一个@property name自动产生一个实例变量,名为_name,因此省去实例变量和 ...

  8. 关闭“JDK自动更新”提示

  9. 获取图片颜色的rgb，以供css设计背景颜色

    ColorPix

  10. BZOJ1584 [Usaco2009 Mar]Cleaning Up 打扫卫生

    令$f[i]$表示以i为结尾的答案最小值,则$f[i] = min \{f[j] + cnt[j + 1][i]^2\}_{1 \leq j < i}$,其中$cnt[j + 1][i]$表示$ ...