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

我想将信息从html输入发布到PHP页面，并使用jQUERY和AJAX动态地重新加载它。函数应该从页面输入中获取所有值并将它们发布到PHP页面，然后在“graph”div中重新加载页面。我有一个html页面、我正在使用的脚本函数和要发布到的PHP页面。单击submit按钮时，我的函数成功地将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>

$（文档）.ready（函数（）{
//加载默认值
var$critSelected='sex'；
$（“.criteria#sex”）.addClass（“criteriaSelected”）；
//更新按钮的操作
$（'form#update'）。提交（函数（）{
var graphContent=$（“#graphContent”）.attr（“值”）；
var标准=$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({
类型：“POST”，
url:“graph.php”，
数据：“graphContent=“+graphContent+”标准=“+criteria，
成功：功能（数据）{
$（'div.graph'）.fadeOut（函数（）{$（'div.graph'）.load（“graph.php”）.fadeIn（）；}）；
}
});
返回false；
});
//更改所选标准
$（“.criteria”）。单击（函数（）{
开关（$（this.attr（“id”））{
“性别”一案：
$（this）.removeClass（“criteriaDeselected”）.addClass（“criteriaSelected”）；
$（.criteria.loc”）.removeClass（“criteriaSelected”）.addClass（“criteriaDeselected”）；
$（“.criteria.type”）.removeClass（“criteriaSelected”）.addClass（“criteriaDeselected”）；
$critSelected='sex'；
打破
案例“loc”：
$（this）.removeClass（“criteriaDeselected”）.addClass（“criteriaSelected”）；
$（“.criteria.sex”）.removeClass（“criteriaSelected”）.addClass（“criteriaDeselected”）；
$（“.criteria.type”）.removeClass（“criteriaSelected”）.addClass（“criteriaDeselected”）；
$critSelected='loc'；
打破
案例“类型”：
$（this）.removeClass（“criteriaDeselected”）.addClass（“criteriaSelected”）；
$（.criteria.loc”）.removeClass（“criteriaSelected”）.addClass（“criteriaDeselected”）；
$（“.criteria.sex”）.removeClass（“criteriaSelected”）.addClass（“criteriaDeselected”）；
$critSelected='type'；
打破
}
});
});

我抓取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;

    ?>

<!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>

html文件如下所示：

   <?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;

    ?>

<!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>

年龄分布






按性别
按地点
住院/门诊病人





年龄范围：
至




地点：
TR
反渗透
蒂尔奇

更新

---

谢谢

编写AJAX调用数据部分的方式，

graphContent=“+graphContent+”criteria=“+criteria

将生成类似“graphContent=value1criteria=value2”的字符串，这是不正确的

您可以使用jQuery 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（）序列化

编写AJAX调用数据部分的方式，

graphContent=“+graphContent+”criteria=“+criteria

将生成类似“graphContent=value1criteria=value2”的字符串，这是不正确的

您可以使用jQuery 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（）序列化

您的问题是使用jQuery

.load（）

重新加载图形。这会导致加载一个新的PHP页面实例，而不带任何

$\u POST

参数

您已经将页面数据加载到

data

变量中。使用类似

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

以获得期望的结果

---

---

另外：按照Nik E说的做…

您的问题是您正在使用jQuery

.load（）

重新加载图形。这会导致加载一个新的PHP页面实例，而不带任何

$\u POST

参数

您已经将页面数据加载到

data

变量中。使用类似

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

以获得期望的结果

---

---

另外：也要照Nik E说的做…

如果你真的不需要任何Ajax，只需从graph类的表单中传输数据，也不需要重新加载，而且速度会更快。我最终会在php函数中使用数据，该函数将基于mysql查询绘制图形。啊，好的，现在我明白了，那么，您会遇到什么错误呢？我不明白为什么要将表单数据序列化为一个值，我会在ajax查询中单独编写每个POST参数。没有使用Nick E.在回答中提到的方法，但我认为这更好，可以很好地缩短JS代码。在您的情况下，您不需要任何Ajax，只需从graph类中的表单传输数据，也不需要重新加载，我最终将使用php函数中的数据，该函数将基于mysql查询绘制一个图形