qq_18136213 2017-02-25 16:02 采纳率: 33.3%
浏览 3756
已采纳

php提交表单不刷新页面的方法(当前页面)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>计算器</title>
<script type="text/javascript">
//document.getElementById("sub1").submit();
function setval(){
var gd = document.getElementById("gaodu").value;
var kd = document.getElementById("kuandu").value;
var sl = document.getElementById("shuliang").value;
if(gd=="")
document.getElementById("gaodu").value=1600;
if(kd=="")
document.getElementById("kuandu").value=600;
if(sl=="")
document.getElementById("shuliang").value=1;
}
</script>
</head>
<?php  
     $gaodu=$_GET["gaodu"];
     $kuandu=$_GET["kuandu"];
     $shuliang=$_GET["shuliang"];
?>     
<body onload="setval()">  
<form action="" id="sub1">  
<input name="gaodu" type="text" id="gaodu" onchange="tijiao()" value="<?php echo $gaodu ?>"> 
<input name="kuandu" type="text" id="kuandu" onchange="tijiao()" value="<?php echo $kuandu ?>">
<input name="shuliang" type="text" id="shuliang" onchange="tijiao()" value="<?php echo $shuliang ?>"> 
<input name="sub" id="sub" type="submit"  value="计算">
</form>
<table width="200" border="1">
  <tr>
    <td><?php echo $gaodu+$kuandu ?></td>
    <td><?php echo $gaodu-$kuandu ?></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>  
</html>

以上代码是想做一个特定功能的计算器,为了初始化页面数据,用js设置了表单默认值,但是页面加载时无法自动计算结果(试过js代码onload提交表单,但是页面会不停的刷新)请教提交表单时只刷新数据不刷新页面的办法,谢谢!

  • 写回答

9条回答 默认 最新

  • 最努力奔跑 2017-02-27 04:03
    关注
    
    ```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>计算器</title>
    <script type="text/javascript">
    //document.getElementById("sub1").submit();
    function setval(){
    var gd = document.getElementById("gaodu").value;
    var kd = document.getElementById("kuandu").value;
    var sl = document.getElementById("shuliang").value;
    if(gd=="")
    document.getElementById("gaodu").value=1600;
    if(kd=="")
    document.getElementById("kuandu").value=600;
    if(sl=="")
    document.getElementById("shuliang").value=1;
    }
    </script>
    </head>    
    <body onload="setval()">  
    <form action="" id="sub1">  
    <input name="gaodu" type="text" id="gaodu"  value=""> 
    <input name="kuandu" type="text" id="kuandu"  value="">
    <input name="shuliang" type="text" id="shuliang"  value=""> 
    <input name="sub" id="sub" type="button"  value="计算">
    </form>
    <table width="200" border="1">
      <tr>
        <td class="val1">&nbsp;</td>
        <td class="val2">&nbsp;</td>
        <td class="val3">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <script src="http://static.blog.csdn.net/scripts/jquery.js"></script>
      <script>
        $('#sub').click(function(){
          var gaodu = $('#gaodu').val();
          var kuandu = $('#kuandu').val();
          var shuliang = $('#shuliang').val();
          //和
          var he = parseInt(shuliang)*(parseInt(gaodu)+parseInt(kuandu));
          //差
          var cha = parseInt(shuliang)*(parseInt(gaodu)-parseInt(kuandu));
          //赋值
          $('.val1').html(he);
          $('.val2').html(cha);
          $('.val3').html(shuliang);
        })
      </script>
    </table>
    </body>  
    </html>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • threenewbee 2017-02-25 16:09
    关注

    不刷新页面就不要用submit,而是ajax方式,jquery里的 $ajax
    http://www.cnblogs.com/johnsneakers/archive/2011/12/06/2278425.html
    http://www.jb51.net/article/65018.htm

    评论
  • 仰望星空2010 2017-02-26 02:06
    关注

    使用Ajax方式提交。例如可以使用Jquery提供的submit方法提交表单

    评论
  • 小啊小木头 2017-02-26 13:07
    关注

    ajax,局部刷新,这样就不需要form的submit了

    评论
  • qq_18136213 2017-02-27 00:46
    关注

    谁能给具体代码吗?看不懂啊。

    评论
  • 最努力奔跑 2017-02-27 03:55
    关注

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    计算器 //document.getElementById("sub1").submit(); function setval(){ var gd = document.getElementById("gaodu").value; var kd = document.getElementById("kuandu").value; var sl = document.getElementById("shuliang").value; if(gd=="") document.getElementById("gaodu").value=1600; if(kd=="") document.getElementById("kuandu").value=600; if(sl=="") document.getElementById("shuliang").value=1; }



    $('#sub').click(function(){ var gaodu = $('#gaodu').val(); var kuandu = $('#kuandu').val(); var shuliang = $('#shuliang').val(); //和 var he = parseInt(shuliang)*(parseInt(gaodu)+parseInt(kuandu)); //差 var cha = parseInt(shuliang)*(parseInt(gaodu)-parseInt(kuandu)); //赋值 $('.val1').html(he); $('.val2').html(cha); $('.val3').html(shuliang); })
         
         
         



    评论
  • luochengquan 2017-03-12 12:51
    关注

    jquery

    评论
  • 曼巴童鞋 2017-06-07 03:04
    关注

    使用jquery.form.js插件实现表单异步提交 下载地址:

    图片说明

    评论
  • 曼巴童鞋 2017-06-07 03:11
    关注
    评论
查看更多回答(8条)

报告相同问题?

悬赏问题

  • ¥15 关于网上一个easyx制作的见缝插针小游戏(c++)
  • ¥15 开地址法双散列函数处理碰撞
  • ¥15 想问一下这个是什么情况 虚拟机Linux打不开了
  • ¥15 联通光猫掉注册了怎么重新注册上去
  • ¥15 关于unity开发steamvr程序遇到的问题
  • ¥60 求tc downloader的下载方式
  • ¥15 华为 快捷方式 手电筒 接口
  • ¥15 Qt6.5支不支持Android13开发啊
  • ¥20 网络只能跑一半,应该如何设置
  • ¥20 Python调用百度开发者平台人脸识别接口