提交表单并在同一页面上显示结果而不刷新[重复]答案

【问题标题】：Submit form and show results on same page without refresh [duplicate]提交表单并在同一页面上显示结果而不刷新[重复]
【发布时间】：2012-11-20 16:21:21
【问题描述】：

可能重复：
How to have user submit text in form and AJAX it to enter to db and show up on same page?

我想做什么：

index.html -> 表单提交到 some.php -> 处理数据（来自 index.html）并将数据发送到 server.php -> 将结果返回到 index.html div。

我读过 ajax、jQuery，我在这个网站上看到了数百个问题，但我还想不通。

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>

一些.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：

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

【问题讨论】：

在这里了解 ajax：api.jquery.com/jQuery.ajax
通过 jQuery 学习使用 AJAX。然后只需在表单提交事件上挂起一个事件处理程序，同时使用 AJAX 将数据发布到 PHP 并接收将显示的响应。使用谷歌。这里没有人会为你写代码和JS...
您的代码对 SQL 注入开放！您不能信任用户输入，也不应该使用它来构建 SQL 查询之类的东西。 bobby-tables.com

标签： php jquery mysql ajax google-visualization

【解决方案1】：

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：

<?php
    $date1 = GET_['start_date'];
    $date2 = GET_['end_date'];

    // PERFORM THE SQL QUERY //
?>

【讨论】：

?start_date=2012&end_date=2014 是那些日期的我，但 update_div 似乎是空的：s
您是否更改了 sql 查询，例如： WHERE date > date1 AND date

【解决方案2】：

流程是：

Jquery/Javascript 函数使用 AJAX 将表单提交到 PHP 脚本。
PHP 脚本对数据进行处理（无需调用另一个 PHP！只需一次性完成）
PHP 脚本对它想要返回到第一个 HTML 页面的信息执行echo。
第一个 HTML 页面在 AJAX 的回调函数中接收来自 PHP 的数据。

【讨论】：