php 提交表单并在同一页面上显示结果而无需刷新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13477491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Submit form and show results on same page without refresh
提问by noneJavaScript
Possible Duplicate:
How to have user submit text in form and AJAX it to enter to db and show up on same page?
What I want to do:
我想做的事：
index.html-> form submit to some.php-> process data (from index.html) and send data to server.php-> returning results to a index.html div.
index.html-> 表单提交到some.php-> 处理数据（来自 index.html）并将数据发送到server.php-> 将结果返回到 index.html div。
I've read ajax, jQuery, I have seen hundreds of questions on this site, but I couldn't figure it out yet.
我已经阅读了 ajax、jQuery，我在这个网站上看到了数百个问题，但我还是想不通。
index.html:
索引.html：
<form action="some.php" method="post">
Start date: <br/> <input name="idate" id="firstdate" type="text" /><br />
End date: <br /> <input name="fdate" id="seconddate" type="text" /><br />
<br />
<input type="button" id="searchForm" onclick="SubmitForm();" value="Send" />
</form>
some.php:
一些.php：
<?php
session_start();
$_SESSION['data1'] = $_POST['firstdate'];
$_SESSION['data2'] = $_POST['seconddate'];
?>
function drawChart() {
var jsonData = $.ajax({
url: "server.php",
dataType: "json",
async: false
}).responseText;
var obj = jQuery.parseJSON(jsonData);
var data = google.visualization.arrayToDataTable(obj);
(...)
server.php:
服务器.php：
$SQLString = "SELECT
count(score) as counts,
DATE(date),
SUM(CASE WHEN gender = 1 then 1 ELSE 0 END) Male,
SUM(CASE WHEN gender = 2 then 1 ELSE 0 END) Female,
AVG(age) as age, score
FROM persons
WHERE date > '".$_SESSION['date1']."' AND date < '".$_SESSION['date2']."'
GROUP BY DATE(date)
ORDER BY DATE(date) asc";
(...)
$data[0] = array('day','counts','Male','Female','Age','Score');
(...)
echo json_encode($data);
回答by kapantzak
HTML:
HTML：
<form id="my_form">
Start date: <br/> <input name="idate" id="firstdate" type="text" /><br />
End date: <br /> <input name="fdate" id="seconddate" type="text" /><br />
<input id="submit_form" type="submit" value="Submit">
</form>
<div id="update_div"></div>
jquery:
查询：
var submit_button = $('#submit_form');
submit_button.click(function() {
var start_date = $('firstdate').val();
var end_date = $('seconddate').val();
var data = 'start_date=' + start_date + '&end_date=' + end_date;
var update_div = $('#update_div');
$.ajax({
type: 'GET',
url: 'proccess_form.php',
data: data,
success:function(html){
update_div.html(html);
}
});
});
proccess_form.php:
进程_form.php：
<?php
$date1 = GET_['start_date'];
$date2 = GET_['end_date'];
// PERFORM THE SQL QUERY //
?>
回答by Naryl
The process is:
过程是：
- Jquery/Javascript function submits the form to a PHP script using AJAX.
- The PHP scripts does something with the data (no need to call to another PHP! just do it all in one)
- The PHP script does a
echoof the info it wants to return to the first HTML page. - The first HTML page receives the data from PHP in the callback function of AJAX.
- Jquery/Javascript 函数使用 AJAX 将表单提交给 PHP 脚本。
- PHP 脚本对数据执行某些操作（无需调用另一个 PHP！只需一个操作即可）
- PHP 脚本执行
echo它想要返回到第一个 HTML 页面的信息。 - 第一个 HTML 页面在 AJAX 的回调函数中接收来自 PHP 的数据。
