更新时间:2023-10-06 13:07:58
HTML:
<形式ID =my_form>
开始日期:< BR /> <输入名称=IDATEID =firstdate类型=文本/>< BR />
结束日期:< BR /> <输入名称=FDATEID =seconddate类型=文本/>< BR />
<输入ID =submit_form类型=提交值=提交>
< /形式GT;
< DIV ID =update_div>< / DIV>
jQuery的:
VAR submit_button = $('#submit_button');
submit_button.click(函数(){
VAR START_DATE = $('firstdate)VAL()。
。VAR END_DATE = $('seconddate)VAL();
VAR数据='START_DATE ='+ START_DATE +'和; END_DATE ='+ END_DATE;
VAR update_div = $('#update_div');
$阿贾克斯({
键入:GET,
网址:proccess_form.php,
数据:数据,
成功:函数(HTML){
update_div.html(HTML);
}
});
});
proccess_form.php:
< PHP
$日期1 = _ GET ['START_DATE'];
$ DATE2 = _ GET ['END_DATE'];
//执行SQL查询//
?>
Possible Duplicate:
How to have user submit text in form and AJAX it to enter to db and show up on same page?
My page structure or 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.
I've read ajax,jquery, ive seen hundreds of questions@***, but i couldnt figure it out yet.
Code index.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>
code some.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);
(...)
code server.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);
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_button');
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:
<?php
$date1 = GET_['start_date'];
$date2 = GET_['end_date'];
// PERFORM THE SQL QUERY //
?>