欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

简单的jquery无刷新表单提交实例

今天学习jquery 的ajax部分

这个自己写了一个无刷新提交,实现简单的计算器功能

分享给初学者学习,高手绕道!

本例子,包含一个html文件,一个php文件

两个文件放同一个文件夹下。

HTML文件:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
  <form action="" id="searchForm">
   请输入一个数字,测试<input type="number" name="s" placeholder="Enter a number..." /> +
   <input type="number" name="b" placeholder="Enter a number..." />
   <input type="button" value="POST" id="su" />
  </form>
  <!-- the result of the search will be rendered inside this div -->
  <div id="result"></div>

<script>
 $(function(){
  $("#su").click(function() { 
 //var form =  $('#searchForm').serialize();
 var s =$("input:[name=s]").val();
 var b =$("input:[name=b]").val();
 $.post("test.php",{s:s,b:b},function(data){ 
     $("#result").html(data)
   });
     // alert("fsdf");   
  });
  });
</script>

</body>
</html>

php文件:

<?php
//print_r($_POST);
//$i = $_POST;
$s = $_POST['s'];
$b = $_POST['b'];
$i = $s+$b;
echo $i;

?>

点击下载源码

更多

本文固定链接: http://shanmao.me/web/jquery/jian-dan-de-jquery-wu-shua-xin-biao-dan-ti-jiao-shi-li | 山猫的博客

该日志由 admin 于2012年05月08日发表在 jQuery 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 简单的jquery无刷新表单提交实例 | 山猫的博客
关键字: , , ,