提交php文件而不刷新

时间:2014-03-07 20:12:11

标签: javascript php jquery html ajax

我正在尝试制作一个单独的PHP表单进行一些计算,但是当按下提交按钮时没有任何反应。

我正在尝试使用ajaxForm来执行此操作

代码:

<?php

  if(isset($_POST['submit'], $_POST['v'], $_POST['e'], $_POST['ei'])){
$v = $_POST['v']; //Dyrets vægt
$v = pow($v, 0.75);
$s = (int)$_POST['s']; //Stofskifte
$e = (int)$_POST['e']; //Energibehov
$ei = (int)$_POST['ei']; //Energiindhold i foder

$vaegt = ($v);
$stofskift = round($vaegt * $s, 2);
$de = $stofskift * $e;
$eif = round($de / $ei * 100, 2);
$result = round($eif * 4.2, 2);

$arr = array( 'testDiv' => $result );
  echo json_encode( $arr );

 exit;
};

//$string = '(((('.$v.')*'.$s.')*'.$e.')/'.$ei.' * 100) * 4,2';

?>

<html>
<head>
<title>Hej</title>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script type="text/javascript" src="jsFile.js"></script>
</head>
<body>
<form method="POST" action="" class="ajaxForm" >
<label for="vaegt">Weight</label><br>
<input type="text" name="v" id="v" placeholder="Weight"><br>
<label for="type">Art</label><br>
<select size="7" name="s" id="s"> 
  <option value="70" >Fugl</option>
</select><br><br>
<label for="str">Størrelse</label><br>
<select size="7" name="e" id="e"> 
  <option value="1.25" >Absolut</option>
</select><br><br>

<label for="foder">Foder</label><br>
<select size="4" name="ei" id="ei"> 
  <option value="60" >Plante</option>
</select><br><br>

<input type="submit" value="Udregn" name="submit" class="ajaxSubmit"/>

</form>

<div id="testDiv">result here</div>
</body>
</html>

jsFile.js:

jQuery(document).ready(function(){

    jQuery('.ajaxform').submit( function() {

        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }
        });

        return false;
    });

});

1 个答案:

答案 0 :(得分:2)

问题#1:

在处理POST请求的if语句中,输出一堆JSON。但是你完成后忘了退出输出。所以,你的输出看起来像:

{"a":"b","c":"d"/* more json here*/}
<html>
<head>
/* more html here */

其中,显然是无效的JSON。 jQuery,如果响应不是真正的JSON,则调用error方法而不是success方法。

要解决此问题,请在PHP if语句结束前添加此行:

exit;

这将在输出所有HTML之前退出PHP脚本。

问题#2:

$(this).serialize()仅抓取具有值的输入。这不包括按钮。因此,与普通表单提交不同,POST请求中不包含submit按钮。这导致您的第一个if语句评估为false。

因此,只需删除第一个嵌套的if语句(if(isset($_POST['submit'])){一个),它就能正常工作。