Question

我在确定如何建立某种连接方面遇到了一些麻烦。这是一个我认为可能很简单的项目，我可以在没有帮助的情况下独自完成，但不幸的是，我碰到了一堵墙。它是一个“运动发生器”，它基本上会提出一些基本问题，并根据您的答案输出推荐的锻炼程序。我用大量的练习构建了MySQL数据库，成功连接数据库，并制作了表格。

然而，我遇到的问题是将这些表格结果存储到变量中，并根据这些变量（例如，如果锻炼天数为3，则只打印3组锻炼而不是5组）输出常规进入与表单相同的div中，有效地将其替换为答案，而不是将其放在提交的表单下面。

的index.php

<!DOCTYPE html>
<html>
<?php $page_title = "Workout Generator"; ?>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
</head>
<body>
    <?php include("header.php"); ?>
    <?php include("connect.php"); ?>
    <div id="appWindow">



        <h3>Please answer the following questions and click 'Submit' to generate your workout routine.</h3>


        <form id="homeForm" method="post" >
            <label for="name">Name: </label>
            <input type="text" name="name"><br>
            <label for="age">Age: </label>
            <input type="number" name="age"><br>
            <label for="workoutdays">How many days a week can you workout?</label>
            <select name="workoutdays">>
                <option value="1">3</option>
                <option value="2">5</option>
            </select><br>
            <label for="workoutstyle">Do you prefer a gym, or bodyweight exercises?</label>
            <select name="workoutstyle">>
                <option value="1">Gym</option>
                <option value="2">Bodyweight</option>
            </select><br>
            <button type="submit" name="submit">Submit</button>
            <button type="reset" name="reset">Reset</button>
        <div class="form_result"></div>
    </form>


    <?php
        $age = $_POST['age'];
        $workoutdays = $_POST['workoutdays'];
        $workoutstyle = $_POST['workoutstyle'];
    ?>


    </div>



<br><br><br>
<?php include("footer.php"); ?>
</body>
</html>

我不一定想要一个给出确切代码的答案，但我希望能指出正确的方向来从MySQL中提取数据，并使用AJAX在同一个窗口中打印而不刷新。

谢谢你

Answer 1

在脚本文件中

$(document).ready(function(){
    $(document).on('click','#submit_btn',function(){
      var url = '/xyz.php'; //full path of the function where you have written the db queries.
      var data = '';//any data that you would like to send to the function.
      $.post(url,{data: data}, function(result){
         var arr = JSON.parse(result);
      });
   });
});

一旦执行了数据库查询并获得结果，就在php文件中

。例如

$result = //result of your mysql query.
echo json_encode($result);
exit;

Answer 2

首先，您需要发布您的请求。 $.ajax这个

//Do this thing on page load
$(function() {
    //handle submit
    $("#homeForm").submit(function(e) {
            //customize your submit
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: youURL, //maybe an url pointing to index.php
                data: yourData, //attach everything you want to pass
                success: function(response) {
                    $("#appWindow").html(response);
                }
            });
    });
});

代码应该有所帮助。您需要确保传递必要的元素并提供正确的URL。在服务器端，生成所需的html并作为响应发回。

从表单中获取值，从MySQL中提取结果，并使用AJAX获取结果

2 个答案: