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

【问题标题】：Using forms to reload and update a PHP page with jQUERY/AJAX使用表单通过 jQUERY/AJAX 重新加载和更新 PHP 页面
【发布时间】：2011-05-25 18:04:27
【问题描述】：

我想从 html 输入向 PHP 页面发布信息，并使用 jQUERY 和 AJAX 动态重新加载它。该函数应该从页面输入中获取所有值并将它们发布到 PHP 页面，然后在“图表”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>

谢谢！

【问题讨论】：

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

标签： php jquery html ajax

【解决方案1】：

您在 AJAX 调用中编写数据部分的方式，"graphContent="+ graphContent + "criteria=" + criteria 会产生一个类似“graphContent=value1criteria=value2”的字符串，这是不正确的。

你可以做的是serialize整个表单，使用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();});
                    }
                });

请记住，所有表单输入元素都必须设置“名称”属性才能被 .serialize() 序列化；

【讨论】：

啊，还有一件事。在最初我想传递 'criteria 变量以及来自表单数据的数据。有什么办法可以将此添加到帖子中？

【解决方案2】：

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

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

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

得到想要的结果。

另外：也照 Nik E 说的做...

【讨论】：