Использование форм для перезагрузки и обновления страницы PHP с помощью jQUERY / AJAX - PullRequest
Новая
       1

Использование форм для перезагрузки и обновления страницы PHP с помощью jQUERY / AJAX

0 голосов
/ 25 мая 2011

Я хочу опубликовать информацию на странице PHP из входных данных HTML и перезагрузить ее динамически, используя jQUERY и AJAX. Функция должна взять все значения из входных данных страницы и опубликовать их на странице PHP, а затем перезагрузить страницу в div «graph». У меня есть 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>

Спасибо!

Ответы [ 2 ]

3 голосов
/ 25 мая 2011

То, как вы записали свою часть данных для вызова 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 ();

1 голос
/ 25 мая 2011

Ваша проблема в том, что вы используете jQuery .load() для перезагрузки графика.Это приводит к загрузке нового экземпляра страницы PHP без каких-либо параметров $_POST!

У вас уже есть данные страницы, загруженные в переменную data.Используйте что-то вроде 

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

, чтобы получить желаемый результат.

Также: делайте то, что говорит Ник Э ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...