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

【问题标题】：Taking values from form, pulling results from MySQL, and using AJAX for results从表单中取值，从 MySQL 中提取结果，并使用 AJAX 获取结果
【发布时间】：2015-09-09 23:18:34
【问题描述】：

我在弄清楚如何建立某种连接时遇到了一些麻烦。这是一个我认为可能很简单的项目，我可以在没有帮助的情况下自己完成，但不幸的是我碰壁了。它是一个“锻炼生成器”，基本上会问一些基本问题，并根据您的回答输出推荐的锻炼程序。我用大量的练习构建了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 在同一个窗口中打印而无需刷新。

谢谢你

【问题讨论】：

google $.post 或 $.ajax jquery

标签： php jquery mysql ajax forms

【解决方案1】：

首先，您需要发布您的请求。用$.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 并作为响应返回。

【讨论】：

【解决方案2】：

在脚本文件中

$(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;

【讨论】：