<!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. 【转】 Linux 线程同步的三种方法

    线程的最大特点是资源的共享性,但资源共享中的同步问题是多线程编程的难点.linux下提供了多种方式来处理线程同步,最常用的是互斥锁.条件变量和信号量. 一.互斥锁(mutex) 通过锁机制实现线程间的 ...

  2. CentOS安装vim

    VMware下CentOS安装成功后,默认自带vi,但vi功能没vim丰富.以下为CentOS中安装vim: 用yum产看源中的vim安装包: [xi@localhost ~]$ yum search ...

  3. bootstrap的弹出框

    data-toggle="popover";//以弹出框事件触发 data-content="弹出框中内容"; data-placement="弹出框 ...

  4. web标准常见问题整理

    1.超链接访问过后hover样式就不出现的问题 2.FF下如何使连续长字段自动换行 3.ff下为什么父容器的高度不能自适应 4. IE6的双倍边距BUG 5. IE6下绝对定位的容器内文本无法正常选择 ...

  5. 创建PO/SO

    IF P_ZY EQ 'X'."直营订单 调拨单 PERFORM FRM_INIT_PO_HEADER. PERFORM FRM_INIT_PO_ITEM. PERFORM FRM_INIT ...

  6. query attr prop区别

    大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked", ...

  7. 算法——js(Fibonacci数列)

    斐波那契数列(Fibonacci sequence),又称黄金分割数列,因数学家列昂纳多·斐波那契(Leonardoda Fibonacci[1]  )以兔子繁殖为例子而引入,故又称为“兔子数列”,指 ...

  8. JavaScript prototype 属性

    prototype 属性使开发人员有能力向对象添加属性和方法. 语法 object.prototype.name=value 实例 在本例中,我们将展示如何使用 prototype 属性来向对象添加属 ...

  9. JSP 服务器响应

    Response响应对象主要将JSP容器处理后的结果传回到客户端.可以通过response变量设置HTTP的状态和向客户端发送数据,如Cookie.HTTP文件头信息等. 一个典型的响应看起来就像下面 ...

  10. POJ 3468 区间更新，区间求和（经典）

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 72265   ...