如何解决使用表单使用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
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\"> By Sex </div>
<div class=\"criteria\" id=\"loc\" style=\"float:left\"> By Location </div>
<div class=\"criteria\" id=\"type\" style=\"float:left\"> In/Out Patient </div><br />
<br />
</div>
<div id=\"constraints\" align=\"left\">
<br />
Age Range :  
<input type=\"text\" value=\"Low\" style=\"width:30px\" id=\"ageLow\" />
to 
<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
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();});
}
});
.load()
$_POST
data
$(\'div.graph\').fadeOut(function(){$(\'div.graph\').html(data).fadeIn();});