提交表单PHP和Jquery函数以显示数据

Question

我正在尝试将表单数据提交到数据库中，然后从数据库中检索一个字段以计算BMI，INSERT和SELECT查询工作正常，但是jquery函数在提交和表单上，因此只有表单正在提交和jquery不工作。 我如何获得提交和制定BMI的表格。 这是我目前拥有的：

    if(isset($_POST['submit']) && $_POST['submit']=="submit"){      
    $userid = $_SESSION['userid'];
    $sql="SELECT 1 FROM userDetails WHERE userid = $userid";

     $rs=$conn->query($sql);

       if($rs === false) {
       trigger_error('Wrong SQL: ' . $sql . ' Error: ' . $conn->error, E_USER_ERROR);
       } 
       else {
       $rows_returned = $rs->num_rows;
    }
    $weight = mysqli_real_escape_string($conn, trim($_POST['eWeight']));
    $time = mysqli_real_escape_string($conn, trim($_POST['gym'])); 


    $query = "INSERT INTO gymTime (userid, timeSpent, newWeight) VALUES  
    ('$userid','$time', $weight)";

      if (mysqli_query($conn, $query)) {

      $query = "SELECT height FROM userDetails WHERE userid = $userid";

      $result = mysqli_query($conn, $query);

      $v = NULL;

      while($row = mysqli_fetch_assoc($result))
{
      $v = (int)$row["height"];

      }

} 

      else {
      echo "Error: " . $result . "<br>" . mysqli_error($conn);
}

BMI脚本

  var myHeight= "<?php echo $v; ?>";

   $( ".bmi" ).on( "click", function() {
   // prevents default submission of form

   getBMI();
   });

   function getBMI(){   
   // get the values from the input box
   var myweight= $("#eWeight").val();
   var myBmi = myweight/(myHeight/100 * myHeight/100);
    displayBMI(myBmi);
   }

  function displayBMI(myBmi){
  $(".showBMI" ).html(" Your BMI is: " + myBmi);
  }

HTML形式：

   <form class="form1" name="bmi" id="formm" method="POST" 
   action="bmi.php">

   <label for="eWeight">Enter Weight: </label> <input type="number"  
   id="eWeight" name="eWeight" required/>


  <label for="gym">Enter Time at Gym: </label> <input type="number"
  id="gym" name="gym" required/>
  <input class="submit" name="submit" type="submit" id="submit" value="submit"/>


  </form>
  <div class="showBMI"></div>

问题在于表单正在提交，但JQuery不在，因为它是基于click的。 任何帮助将非常感激。

Answer 1

如果要阻止提交表单，则必须在on“ click”函数内调用jQuery jQuery preventdefault函数：

https://api.jquery.com/event.preventdefault/

这可能导致表单再次提交，而不是计算BMI。 但是，如果您具有PHP中的所有变量（高度和重量），则在服务器端计算BMI可能更容易，而直接为用户输出一个数字，而不是尝试在javascript中进行计算即可。

Answer 2

只是通过捕获提交事件并防止默认行为来阻止表单提交。

然后，如果执行成功并且返回了所需的数据，则调用其余代码。

检查此代码：

$(function() {
   function displayBMI(bmi){
     $(".showBMI").html("Your BMI is: " + bmi);
   }

   var $form = $("#formm");

   $form.submit(function(e) {
     e.preventDefault();

     $.ajax({
       url: $form.attr('action'),
       type: $form.attr('method'),
       data: $form.serializeArray(),
       success: function(response) {
         if(typeof response === 'string') {
           response = $.parseJSON(response); // because I don't know how is Your code, and headers, so I'll be accurate and parse json response if it's string
         } 

         if(!response.success) {
           if(response.message) {
             alert(response.message);
           }
           $form.find('input').val('');
           return;
         }

         displayBMI(response.data.bmi);
       }
     });
   });
});

另外，您的php代码很难看。

您执行不必要的数据库请求，

您可以无限制地进行查询，

您没有具体的样式：mysqli_ *或mysqli :: *吗？

您回显$sql查询和sql错误代码作为答案，普通用户不需要它们，坏家伙使用它来获取漏洞，请尝试不要向用户手动显示错误。

无论如何，请尝试以下代码：

 if(!session_id()) {
   session_start();
 }

 if(isset($_POST['submit'])){ // if it was form submission

    $userid = isset($_SESSION['userid'])? (int)$_SESSION['userid'] : false; // take userid from session

    if(!$userid) {
      // seems like there is no userid param in session array, it means user is not autheticated/authorized
      echo json_encode(array("success" => false, "message" => "Unauthorized!"));
      exit(0);
    }

    // checking if user exist, if not stop execution
    $q = "SELECT 1 FROM userDetails WHERE userid = ".$userid." LIMIT 1";
    $q = $conn->query($q);
    if($q->num_rows == 0) {
      session_write_close();
      echo json_encode(array("success" => false, "message" => "User not found"));
      exit(0);
    }

    // inserting data
    $weight = $conn->real_escape_string(trim($_POST['eWeight']));
    $time = $conn->real_escape_string(trim($_POST['gym'])); 
    $q = "
     INSERT INTO gymTime 
     (userid, timeSpent, newWeight) 
     VALUES  
     (".$userid.",'".$time."', '".$weight."')";
    $conn->query($q); 

    // getting user data and calculating bmi
    $q = "SELECT height FROM userDetails WHERE userid = ".$userid." LIMIT 1";
    $record = $conn->query($q)->fetch_array(MYSQLI_ASSOC);

    // here calculate bmi
    $record['bmi'] = $_POST['eWeight']/ pow($record['height']/100, 2);

    session_write_close();
    echo json_encode(array("success" => true, "data" => $record));
 }