Ajax各种调用方法举例

最新推荐文章于 2021-08-06 00:40:07 发布

陌阡

最新推荐文章于 2021-08-06 00:40:07 发布

阅读量1.5k

点赞数

分类专栏： ajax 文章标签： ajax function xmlhttprequest user input javascript

本文链接：https://blog.youkuaiyun.com/zhaoxuejie/article/details/7243250

版权

ajax 专栏收录该内容

1 篇文章

订阅专栏

<html>
<head>
	<title>ajax测试</title>
<script src='jquery.js'></script>
<script>
	/*javascript Ajax 测试*/
	/*
	//创建xmlHttpRequest对象
	function getXmlHttp(){
		var xmlHttp = null;
		try{
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE
		}catch(e){
			try{
				xmlHttp = new XMLHttpRequest();//FF
			}catch(e){
				alert("您的浏览器不支持Ajax！");
				return false;
			}
		}
		return xmlHttp;
	}
	//提交请求
	function checkForm(){
		//Dom简写形式
		function $(id){
			return document.getElementById(id);
		}
		//获得提交变量	
		var user_name = $('user_name').value;
		var user_sex = $('user_sex').value;
		var user_age = $('user_age').value;
		//获得xmlHttpRuquest对象
		var xmlHttp = getXmlHttp();
		//创建url
		var myurl = "reg.php?user_name="+user_name+"&user_sex="+user_sex+"&user_age="+user_age+"&id="+Math.random();
		//GET方式提交服务器
		xmlHttp.open('GET',myurl,true);
		//响应服务器返回函数
		xmlHttp.onreadystatechange=callback;
		//处理返回数据
		function callback(){
			if(xmlHttp.readyState==4 && xmlHttp.status==200){
				$('reg_info').innerHTML = xmlHttp.responseText;
			}
		}
		//发送请求
		xmlHttp.send(null);
		
	
	}*/
	
	/*jQuery Ajax 测试*/
	function checkForm()
	{
		//GET方式=============================================
		$(function(){
			$.get("reg.php?id"+Math.random(),"a=b",function(l){
				$("#reg_info").html(l);
			});
		});
		
		//POST方式=============================================
		$(function(){
			$.post("reg.php","a=b",function(l){
				$("#reg_info").html(l);
			});
		});
		
		//Load之post方式=======================================
		$(function(){
			$("reg_info").load("reg.php","a=b",function(l){
				$("#reg_info").html(l);
			});
		});
		
		//Load之get方式=========================================
		$(function(){
			$("reg_info").load("reg.php?a=b",function(l){
				$("#reg_info").html(l);
			});
		});         
		
		//底层ajax()方式=======================================
		$(function(){
			$.ajax({
				type:"POST",
				url:"reg.php",
				data:"a=b",
				success:function(msg){
					$("#reg_info").html(msg);
				}
			});
		});
		
	}
</script>
</head>
<body>
	<form name='form1'>
		姓名：<input type='text' name='user_name' id="user_name"><br/>
		性别：<input type='text' name='user_sex' id="user_sex"><br/>
		年龄：<input type='text' name='user_age' id="user_age"><br/>
		<input type='button' value='提交' οnclick="checkForm()">
	</form>
	<div id="reg_info">	
	</div>
</body>
</html>