Question

我想从html输入发送信息到PHP页面，并使用jQUERY和AJAX动态重新加载它。该函数应该从页面输入中获取所有值并将它们发布到PHP页面，然后在“graph”div中重新加载页面。我有一个html页面，我正在使用的脚本函数，以及要发布到的PHP页面。我的函数在单击提交按钮时成功将PHP页面加载到div中，但我尝试发布的信息似乎没有传输。感谢帮助。

这是我使用的jQUERY脚本：

<script src="jquery.js"></script>
<script type="text/javascript"> 

    $(document).ready(function(){
        //On-load defaults                     
        var $critSelected = 'sex';     
        $(".criteria#sex").addClass("criteriaSelected");

        //Action for update button
        $('form#update').submit(function() {
            var graphContent = $("#graphContent").attr("value");
            var criteria     = $critSelected;
            var ageLow       = $('#ageLow').attr('value');
            var ageHigh      = $('#ageHigh').attr('value');
            var tr           = $('#tr').attr('checked');
            var ro           = $('#ro').attr('checked');
            var tilch        = $('#tilch').attr('checked');
                $.ajax({
                    type: "POST",
                    url: "graph.php",
                    data: "graphContent="+ graphContent + "criteria=" + criteria,
                    success: function(data){
                        $('div.graph').fadeOut(function(){$('div.graph').load("graph.php").fadeIn();});
                    }
                });
            return false;
        });

        //Change selected criteria
        $(".criteria").click(function() {
            switch($(this).attr("id")) {
                case 'sex':
                    $(this).removeClass("criteriaDeselected").addClass("criteriaSelected");
                    $(".criteria#loc").removeClass("criteriaSelected").addClass("criteriaDeselected");
                    $(".criteria#type").removeClass("criteriaSelected").addClass("criteriaDeselected");
                    $critSelected = 'sex';
                    break;
                case 'loc':
                    $(this).removeClass("criteriaDeselected").addClass("criteriaSelected");
                    $(".criteria#sex").removeClass("criteriaSelected").addClass("criteriaDeselected");
                    $(".criteria#type").removeClass("criteriaSelected").addClass("criteriaDeselected");
                    $critSelected = 'loc';
                    break;
                case 'type':
                    $(this).removeClass("criteriaDeselected").addClass("criteriaSelected");
                    $(".criteria#loc").removeClass("criteriaSelected").addClass("criteriaDeselected");
                    $(".criteria#sex").removeClass("criteriaSelected").addClass("criteriaDeselected");
                    $critSelected = 'type';
                    break;
            }
        });


    });

</script>

我抓住了php文件中的帖子，如下所示：

   <?php
    include("graphFunctions.php");

    $graphContent = htmlspecialchars(trim($_POST['graphContent']));
    $criteria     = htmlspecialchars(trim($_POST['criteria']));
    $ageLow       = htmlspecialchars(trim($_POST['ageLow']));
    $ageHigh      = htmlspecialchars(trim($_POST['ageHigh']));
    $tr           = htmlspecialchars(trim($_POST['tr']));
    $ro           = htmlspecialchars(trim($_POST['ro']));
    $tilch        = htmlspecialchars(trim($_POST['tilch']));

    echo $graphContent." ".$criteria." ".$ageLow;

    ?>

html文件如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="graph.css" rel="stylesheet" type="text/css" />

    <?php include("scripts.php"); ?>

</head>

<body>
<form id="update" method"post">
<div id="leftnav" align="center">

    <div id="title" align="center">
        <select id="graphContent" style="width:150px">
            <option value="Age Distribution">Age Distribution</option>
            <!-- <option value="sex">Sex Distribution</option>
            <option value="volvloc">Volume vs. Location</option>
            <option value="treatment">Treatment Distibution</option> -->
        </select>
        <br />
        <br />
    </div>

    <div id="criteria" align="right">
        <br />
        <div class="criteria" id="sex" style="float:left">&nbsp;&nbsp;By Sex&nbsp;&nbsp;</div>
        <div class="criteria" id="loc" style="float:left">&nbsp;&nbsp;By Location&nbsp;&nbsp;</div>
        <div class="criteria" id="type" style="float:left">&nbsp;&nbsp;In/Out Patient&nbsp;&nbsp;</div><br />
        <br />
    </div>

    <div id="constraints" align="left">
        <br />
        Age Range : &nbsp&nbsp;
        <input type="text" value="Low" style="width:30px" id="ageLow" />
        &nbsp;to&nbsp
        <input type="text" value="High" style="width:30px" id="ageHigh" />
        <br />
        <br />
        Location : 
        <input type="checkbox" value="TR" id="tr" />TR 
        <input type="checkbox" value="RO" id="ro" />RO
        <input type="checkbox" value="Tilch" id="tilch" />Tilch<br />
    </div>

    <div class="submit" align="left" style="padding-top:100px">
    <button type="submit" name="submit">Update</button>
    </form>
    </div>


</div>

<div class="graph" style="display:none">
</div>

</body>

</html>

谢谢！

Answer 1

您编写AJAX调用数据部分的方式"graphContent="+ graphContent + "criteria=" + criteria 会产生一个像“graphContent = value1criteria = value2”这样的字符串，这是不合适的。

您可以使用jQuery serialize（）方法serialize整个表单，并通过以下方式发送：

var formData = $('form#update').serialize();
$.ajax({
                    type: "POST",
                    url: "graph.php",
                    data: formData,
                    success: function(data){
                        $('div.graph').fadeOut(function(){$('div.graph').load("graph.php").fadeIn();});
                    }
                });

请记住，所有表单输入元素都必须设置“name”属性才能通过.serialize（）进行序列化;

Answer 2

您的问题是您正在使用jQuery .load()重新加载图表。这会导致加载PHP页面的新实例而没有任何$_POST参数！

您已将页面数据加载到data变量中。使用像

这样的东西

 $('div.graph').fadeOut(function(){$('div.graph').html(data).fadeIn();});

获得理想的结果。

另外：做Nik E所说的......

使用表单使用jQUERY / AJAX重新加载和更新PHP页面

2 个答案: