Jquery-Ajax实例分析加注释

最新推荐文章于 2021-08-06 00:48:36 发布

wyj880220

最新推荐文章于 2021-08-06 00:48:36 发布

阅读量1.7k

点赞数

分类专栏： WEB开发

WEB开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近在看一些lightbox的插件，里面利用到了jquery和Ajax结合使用展示图片的实例，就从网上找到了一篇实例文章，代码中有些地方给加入了注解。

html代码如下所示：

<html>
	<head>jQuery Ajax 实例演示
	<script src="js/jquery-1.10.2.min.js"></script> 
	<meta charset="UTF-8" />
<script type="text/javascript">
	$(document).ready(function(){
		$('#send_ajax').click(function()
		{
			var params=$('input').serialize();
			
			$.ajax({
				url:'ajax_json.php',
				type:'post',         //数据发送方式      
                dataType:'json',     //接受数据格式
                data:params,         //要传递的数据 
                success:update_page//回传函数(这里是函数名)    
			});
		});
      $('#test_post').click(function(){
	  	$.post(
		'ajax_json.php',
		{
			username:$('#input1').val(),
			age:$('#input2').val(),
			sex:$('#input3').val(),
			job:$('#input4').val(),
		},
		function (data){
		var myjson='';
		//返回的json数据要加大括号变为对象，否则会按照程序语句进行解析，从而报错
		var test=eval('('+data+')');
		//返回json数据变为对象
		eval('myjson='+data+';')
	   
		$('#result').html("姓名："+myjson.username+"<br/>工作："+myjson['job']);	
		});
	  });
	$('#test_get').click(function(){
		$.get(
			'ajax_json.php',
		{
			username:$('#input1').val(),
			age:$('#input2').val(),
			sex:$('#input3').val(),
			job:$('#input4').val(),
		},
		function(data){
			var myjson = '';
			var test = eval('(' + data + ')');
			eval('myjson=' + data + ';')
			
			$('#result').html("姓名：" + myjson.append + "<br/>工作" + myjson['job']);
		}
		);
	});
	 
	}); 
	function update_page(json){
		alert(json);
		var str="姓名"+json.username+"<br/>";	
	
		str+="年龄"+json.age+"<br/>";	
		
		str+="性别"+json.sex+"<br/>";	
		str+="工作"+json.job+"<br/>";	
		str+="追加内容"+json.append+"<br/>";
		$("#result").html(str);

	
	  
	}
	
	

</script>
	</head>
	<body>
 <div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div> 
         <form id="formtest" action="" method="post"> 
    <p><span>输入姓名:</span><input type="text" name="username" id="input1" /></p>
     <p><span>输入年龄:</span><input type="text" name="age" id="input2" /></p>
     <p><span>输入性别:</span><input type="text" name="sex" id="input3" /></p>
     <p><span>输入工作:</span><input type="text" name="job" id="input4" /></p>
 </form> 
<button id="send_ajax">提交</button> 
<button id="test_post">POST提交</button>
 <button id="test_get">GET提交</button>
	</body>
</html>

php返回json数据代码如下所示，文件名为：ajax_json.php

<?php header("Content-Type: text/html; charset=utf-8")?>
<?php 

//$arr = $_POST; //若以$.get()方式发送数据，则要改成$_GET.或者干脆:$_REQUEST
 $arr=$_REQUEST;
   $arr['append']='测试字符窜';
   //将请求的数据进行json代码的编辑
     $myjson=json_encode($arr); 
     echo $myjson;
     
?>