HTML PHP显示表单提交结果在同一页面上 - HTML PHP show form submit results on same page

我试图使一组网页，将显示基于一个简单的形式，只有一个选择框和提交按钮唯一的图形。基本上，我想要发生的是，当用户在选择器中更改月份并按下提交时，一个新的图表集将在同一页面上呈现。

这是HTML的初始页面:

<HTML>
<HEAD>
    <SCRIPT src="http://code.jquery.com/jquery-1.10.1.min.js"></SCRIPT>
</HEAD>
<BODY>
    <CENTER>
        <FORM ID="form1" METHOD="post" ACTION="">
            <SELECT NAME="monthSelector">
                <OPTION VALUE="0">Select Month...</OPTION>
                <OPTION VALUE="1">January</OPTION>
                <OPTION VALUE="2">February</OPTION>
                <OPTION VALUE="3">March</OPTION>
                <OPTION VALUE="4">April</OPTION>
                <OPTION VALUE="5">May</OPTION>
                <OPTION VALUE="6">June</OPTION>
                <OPTION VALUE="7">July</OPTION>
                <OPTION VALUE="8">August</OPTION>
                <OPTION VALUE="9">September</OPTION>
                <OPTION VALUE="10">October</OPTION>
                <OPTION VALUE="11">November</OPTION>
                <OPTION VALUE="12">December</OPTION>
            </SELECT>
            <INPUT TYPE="submit" VALUE="Show Charts">
        </FORM>
        <DIV ID="response"></div>
        <SCRIPT>
            function submit()
            {
                $(function()
                {
                    var month = 3;
                    var formdata = "month=" + month;
                    $.ajax({
                        type: 'POST',
                        url: 'showCharts.php',
                        data: formdata,
                        success: function(data) {
                            $("#response").html(data);
                        }
                    });
                });
            }
        </SCRIPT>
    </CENTER>
</BODY>
</HTML>

这里是showcharts。php:

<?php
    include("../FusionCharts/FusionCharts.php");
    include("../DBConnect.php");
    $month = $_POST['month'];
    echo $month;
    //insert complex queries and fusioncharts code that already works!
?>

谁来帮帮我，我已经盯着这个看了几个小时了，一点进展也没有

你也可以使用jQuery的。load方法:

function submit()
        {
             var month = 3;
             var formdata = month;
             $('#response').load('showCharts.php?month='+formdata);
        }

还需要设置:

$month = $_REQUEST['month'];

另一种方法是:

$('select').change(function() {
          var formdata = { month: document.getElementsByName('monthSelector')[0].value };
          $('#response').load( 'showCharts.php', formdata);
      });

尝试替换

<FORM ID="form1" METHOD="post" ACTION="">

<FORM ID="form1" METHOD="post" ONSUBMIT="submit(); return false;">

应该可以。

在jQuery部分，输入如下:

function submit()
{
    var month = $('select[name="monthSelector"]').val();
    $.ajax({
        type: 'POST',
        url: 'showCharts.php',
        data:{'month':month},
        success: function(data)
        {
            $("#response").html(data);
        }
    });
}

还有一件事:试着改进HTML代码，它会给你的网页一个更好的图像。

您确定是否调用了submit函数?绑定表单的提交事件了吗?

我会写$("#form1").submit(submit);

此外，您应该在submit()结束时返回false以阻止默认的表单操作(我认为是刷新当前页面)

尝试更新变量formdata，使其成为json对象而不是字符串。

<SCRIPT>
            function submit()
            {
                $(function()
                {
                    var month = 3;
                    var formdata = {'month': month}; //change made here
                    $.ajax({
                        type: 'POST',
                        url: 'showCharts.php',
                        data: formdata,
                        success: function(data) {
                            $("#response").html(data);
                        }
                    });
                });
            }
        </SCRIPT>

你的jQuery代码应该如下:

$(function() {
      var month = 3;
      var formdata = { month: month };
      $('#response').load( 'showCharts.php', formdata );
      $('#form1').submit(function( e ) {
          e.preventDefault();
          var formData = { month: this.monthSelector.value };
          $('#response').load( 'showCharts.php', formData);
      });
});

在使用ajax .load()方法时，您应该注意以下事项:

请求方法
如果数据作为对象提供，则使用POST方法;否则,

因此，有了上面的jQuery代码，你的PHP脚本就不需要修改了