index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.5.1.min.js"></script></head>
<script language="javascript">
function addclick() {
$("#load").show();
$.ajax({
type: "get",
dataType: "json",
url: "post.php",
data: "case="+$("#txtuserName").val(),
complete :function(){
$("#load").hide();
},
success: function(data){
var outhtml = '';
$.each(data, function(i,val){ //each = foreach, i= $key, val = $value
outhtml += val.text+val.demoData+"<BR>"
});
$("#result_div").html(outhtml);
},
error:function(){
alert('error');
}
});
}
</script>
<body>
<div id="load" style="display:none">loading....
</div>
<div id="result_div" style="width:500px;height:100px;border:1px solid red">
</div>
<input type="text" name="" id="txtuserName" size="3"> x9
<input type="button" value="" οnclick="javascript:addclick()">
</body>
</html>
post.php
<?PHP
$re = array();
$re['0']['text'] = $_GET['case'].'x9=';
$re['0']['demoData'] = $_GET['case']*9;
$re['1']['text'] = $_GET['case'].'x2=';
$re['1']['demoData'] = $_GET['case']*2;
die(json_encode($re));
?>