假日咖啡的博客

HolidayCoffee's Blog

jquery+json+php新手实践<客户端传值_服务器端计算>

本次实践的目的:

客户端发送两个数值,使用ajax技术传给服务器端php脚本,php脚本负责计算,并返回计算结果。

实践意义:在不刷新客户端页面的情况下更新页面数据。

服务器端代码:

<?php
$a = $_POST['va'];
$b = $_POST['vb'];
echo $a+$b;
?>

客户端代码

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){
	
  $("#b01").click(function(){
	  var v1=$("#v1").attr('value')  
	  var v2=$("#v2").attr('value')
	  
		  htmlobj=$.ajax({	url:"s.php",
		  					type: "POST", 
							dataType: "json", 
							async:false,
							success: function(){
											$('body').append("<p>传输成功!</p>")
										  },
							data:{va:v1,vb:v2}
							
		  });
		  
		  $("#myDiv").val(htmlobj.responseText);
		  
  });
  
});
</script>
</head>

<body>
<form action="s.php" method="post">
  <p>
  <input id="v1" name="va" type="text" />
  </p>
  <p>
    <input id="v2" name="vb" type="text" />
  </p>
   <p>
    <input id="b01" name="" value="click me!" type="button" />
  </p>
   <p>
     <textarea cols="120" rows="20" id="myDiv"></textarea>
  </p>
 
</form>
</body>