提交表单并显示结果，而无需刷新同一页上 [英] Submit form and show results on same page without refresh

问题描述

  

可能重复：
  <一href="http://stackoverflow.com/questions/13369940/how-to-have-user-submit-text-in-form-and-ajax-it-to-enter-to-db-and-show-up-on-s">How有用户在表单提交的文本和AJAX它进入到数据库并显示同一页面上？

我的页面结构，或者是我想要做的：

index.html的 - >表单提交给 some.php - >程序数据（从index.html的），并将数据发送到 server.php - >返回结果为index.html的DIV

我读过AJAX，jQuery的，我见过数百个问题@计算器，但我不能弄明白呢。

code的index.html：

 ＆LT;形式的行动=some.php方法=邮报＆GT;
开始日期：＆LT; BR /＆GT; ＆LT;输入名称=IDATEID =firstdate类型=文本/＆GT;＆LT; BR /＆GT;
结束日期：＆LT; BR /＆GT; ＆LT;输入名称=FDATEID =seconddate类型=文本/＆GT;＆LT; BR /＆GT;
＆LT; BR /＆GT;
＆LT;输入类型=按钮ID =searchForm的onclick =SubmitForm（）;值=发送/＆GT;
＆LT; /形式GT;
 

code some.php：

 ＆LT; PHP
在session_start（）;
$ _SESSION ['DATA1'] = $ _ POST ['firstdate'];
$ _SESSION [数据2'] = $ _ POST ['seconddate'];
？＆GT;

 功能drawChart（）{
            VAR jsonData = $阿贾克斯（{
                网址：server.php
                数据类型：JSON，
                异步：假的
            }）responseText的;

            VAR OBJ = jQuery.parseJSON（jsonData）;
            VAR数据= google.visualization.arrayToDataTable（OBJ）;

（...）
 

code server.php：

  $的SqlString =SELECT
            数（分数）为计数，
            DATE（日期），
            SUM（CASE WHEN性别= 1，则1 ELSE 0 END）男，
            SUM（CASE WHEN性别= 2，那么1 ELSE 0 END）女，
            AVG（岁）的年龄，得分
            从人
            其中date＆GT; '。$ _ SESSION ['日期1'。和日期＆LT; '。$ _ SESSION ['date2的'。'
            GROUP BY DATE（日期）
            按日期（日期）ASC;

（...）
$数据[0] =阵列（日，计数，男，女，年龄，得分）;
（...）
回声json_en code（$的数据）;
 

解决方案

HTML：

 ＆LT;形式ID =my_form＆GT;
    开始日期：＆LT; BR /＆GT; ＆LT;输入名称=IDATEID =firstdate类型=文本/＆GT;＆LT; BR /＆GT;
    结束日期：＆LT; BR /＆GT; ＆LT;输入名称=FDATEID =seconddate类型=文本/＆GT;＆LT; BR /＆GT;
    ＆LT;输入ID =submit_form类型=提交值=提交＆GT;
＆LT; /形式GT;

＆LT; D​​IV ID =update_div＆GT;＆LT; / DIV＆GT;
 

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：

 ＆LT; PHP
    $日期1 = _ GET ['START_DATE'];
    $ DATE2 = _ GET ['END_DATE'];

    //执行SQL查询//
？＆GT;
 

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@stackoverflow, 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 //
?>

这篇关于提交表单并显示结果，而无需刷新同一页上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！