<!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. java 多线程5（创建方式）

    实现Runnable接口: 问题1:Runnable实现类的对象是线程对象吗? 答:不是,该对象只不过是实现了Runnable接口的对象而已,只有是Thread或Thread的子类才是线程对象. 问题 ...

  2. canvas drawImage异步特性

    先看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. 5.4.2 使用配置启动firefox

    1.使用firefox的本地配置加载浏览器 使用本地配置加载浏览器,代码如下. 这样运行后,可以看到firebug等插件都已启动. 练习:假设做性能测试时,需要获取某个状况下的页面网络运行参数.要求完 ...

  4. BeautifulSoup 常用方法

    #输出所得标签的‘’属性值 获取 head里面的第一个meta的content值 soup.head.meta['content'] 获取第一个span的内容 soup.span.string 获取第 ...

  5. C#中结构体和类的区别

    结构体和类同样能够定义字段,方法和构造函数,都能实例化对象,这样看来结构体和类的功能好像是一样的了,但是他们在数据的存储上是不一样的 C#结构体和类的区别问题:这两种数据类型的本质区别主要是各自指向的 ...

  6. centos修改文件及文件夹权限

    查看文件权限的语句: 在终端输入:ls -l xxx.xxx (xxx.xxx是文件名) 那么就会出现相类似的信息,主要都是这些:-rw-rw-r-- 一共有10位数 其中: 最前面那个 - 代表的是 ...

  7. Lambda表达式与Function接口

    Lambda表达式是一个匿名函数.C++ 11和 java 8 相继引入了有关对Lambda表达式的支持. Lambda表达式对于高级语言而言并不是必要的,对于Java而言它的功能和一个简易的接口差不 ...

  8. for循环的嵌套——7月24日

      练习一:输入一个正整数,用for循环嵌套求阶乘的和 //输入一个正整数,求1!+2!+....+n! 用for循环嵌套 Console.Write("请输入一个正整数:"); ...

  9. 转载：Clear Float

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑 开.换句简单好理解的话来说,假如你在写CODE时,其中div ...

  10. fill_parent和wrap_content的区别

    在Android布局文件中定义视图垂直或水平大小: android:layout_width和android_layout_height的属性有fill_parent.wrap_content和mat ...