<!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. ios 企业证书 ipa 重新签名发布

    提示:暂时不能用了,企业证书滥用 ios 企业证书 ipa 重新签名发布 1. 应用场景 当前有一个 未用企业证书签名的 ipa 文件,默认是不可以直接安装到设备上的:我们需要用企业版证书签名: 当前 ...

  2. DirectX小记

    1.关于SetViewPort 如果不调用SetViewPort,那么设备对应的ViewPort是什么. 2.关于多线程渲染 如果逻辑线程和渲染线程分开, 则存在两种渲染方式 a.逻辑线程一次性提交渲 ...

  3. android动画小析

    这里所讲的动画,是android framework提供的动画框架里面的动画. 是view层级的动画.不涉及到底层opengl es相关的动画实现. 动画: 主要包括 Interpolation du ...

  4. linux笔记：linux常用命令-权限管理命令

    一个文件的权限只有root和所有者可以更改. 权限管理命令:chmod(改变文件或目录的权限) 权限的数字表示: 用权限加减的方式改变权限(u代表所有者,g代表所属组,o代表其他人,a代表所有人): ...

  5. WinForm应用程序之注册模块的设计与实现

    Posted on 2012-11-13 10:21 星星之火116 阅读(3260) 评论(4) 编辑 收藏 我们在安装一些桌面应用程序的时候,往往在会有提示当前用户使用的是试用版,要进行注册.刚好 ...

  6. C#高级知识点概要(2) - 线程和并发

    原文地址:http://www.cnblogs.com/Leo_wl/p/4192935.html 我也想过跳过C#高级知识点概要直接讲MVC,但经过前思后想,还是觉得有必要讲的.我希望通过自己的经验 ...

  7. 纯css3代码写无缝滚动效果

    主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...

  8. bootstrap的警告框

    .alert 基础警告框 .alert-danger  红色警告框 .alert-dismissable  修饰警告框 alert-dismiss="alert" 触发警告框 // ...

  9. 转载Javascript继承两种形式详解

    一直想对Javascript再次做一些总结,正好最近自己写了一个小型Js UI库,总结了一下Js的继承机制,在网上也看了一些前辈们博客里的总结,感觉分析不是特别全面.这里仅仅是把自己的学习体会拿出来分 ...

  10. linux shell 单引号 双引号 反引号的区别

    一.单引号和双引号 首先, 单引号和双引号,都是为了解决中间有空格的问题. 因为空格在linux中时作为一个很典型的分隔符,比如 string1=this is a string,这样执行就会报错.为 ...