堆栈内存溢出
  繁体   English   中英

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

[英]Using forms to reload and update a PHP page with jQUERY/AJAX

 原文  2011-05-25 18:04:27  6   2    php/ jquery/ html/ ajax

问题描述

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

谢谢！

2 个解决方案

解决方案1
 3 已采纳  2011-05-25 18:13:31

您编写 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();});
                    }
                });

请记住，所有表单输入元素都必须设置一个“名称”属性，以便通过.serialize() 进行序列化；

解决方案2
 1  2011-05-25 18:20:20

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

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

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

得到想要的结果。

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用ajax使用发布请求更新php页面重新加载页面？ 使用PHP代码而不重新加载页面（窗体） 带有PHP和AJAX页面的jQuery更新 添加表单时PHP重新加载页面（可能需要ajax） 使用 AJAX 从 PHP 重新加载页面的一部分 使用 PHP 和 Ajax 重新加载和重定向页面 用户使用AJAX和jQuery登录时如何更新php页面？ 如何在不重新加载整个页面的情况下使用javascript或jquery或ajax增加php中的字段数 使用AJAX / PHP在同一页面上有2种表单 服务器端代码通过PHP中的jQuery ajax调用重新加载页面
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM