Question

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

这是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!
?>

有人请帮助我，我已经盯着这几个小时，但无法取得任何进展。

Answer 1

您也可以使用jQuery的.load方法：

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

此外，您还需要设置：

$month = $_REQUEST['month'];

Answer 2

另一种方法是：

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

Answer 3

尝试替换

<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代码，它会为您的网页提供更好的图像。

Answer 4

您确定甚至调用了提交功能吗？你绑定表单的提交事件吗？

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

之类的事情

另外，你应该在submit（）结束时返回false以阻止默认的表单操作（刷新我认为的当前页面）

Answer 5

尝试更新变量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>

Answer 6

您的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方法;除此以外，   假设GET。

因此，使用上面的jQuery代码，您的PHP脚本无需更改。

HTML PHP显示表单在同一页面上提交结果

6 个答案: