从表单中取值，从 MySQL 中提取结果，并使用 AJAX 获取结果
Posted
技术标签:
【中文标题】从表单中取值，从 MySQL 中提取结果，并使用 AJAX 获取结果【英文标题】：Taking values from form, pulling results from MySQL, and using AJAX for results 【发布时间】：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 【参考方案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;
【讨论】：
以上是关于从表单中取值，从 MySQL 中提取结果，并使用 AJAX 获取结果的主要内容，如果未能解决你的问题，请参考以下文章