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

问题描述

|| 我想将信息从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>

谢谢！

解决方法

编写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()重新加载图形。这将导致不带任何$_POST参数的情况下加载PHP页面的新实例！您已经将页面数据加载到data变量中。使用类似

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

获得理想的结果。另外：也要执行Nik E所说的...

使用使用使用加载加载更新更新表单表单重新页面页面

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

问题描述

解决方法

相关问答