工作原理是，<div>内容根据他们选择的<select>选项而变化。
而不是一堆<div>我想使用ajax。
不幸的是，我对ajax不太满意，但我想学习使用它。如果有人可以帮助我指出正确的方向，那就太棒了。
我想制作一个通用的Ajax类，所以我可以在我的框架中的任何地方使用它。然后，如果需要，从中扩展另一个类。
您可以在我之前的SO问题上看到我的PHP： Change div according to dropdown boxes selected
HTML
<form action="" method="post" name="create" target="_top">
<fieldset>
<ul class="create">
<li>
<label class="label" for="character_name">Character Name:</label>
<input class="text" type="text" name="character_name" id="character_name" />
</li>
<li>
<label class="label" for="character_gender">Gender:</label>
<select class="character_gender select" name="character_gender" id="character_gender">
<option class="option" value="1">Female</option>
<option class="option" value="2">Male</option>
</select>
</li>
<li>
<label class="label" for="character_race">Character Race:</label>
<select class="character_race select" name="character_race" id="character_race">
<option class="option" value="1">Goblin</option>
<option class="option" value="2">Human</option>
<option class="option" value="3">Undead</option>
</select>
</li>
<li>
<label class="label" for="character_class">Character Class:</label>
<select class="character_class select" name="character_class" id="character_class">
<option class="option" value="1">Warrior</option>
<option class="option" value="2">Wizard</option>
</select>
</li>
<li>
<input class="submit-create-character" type="submit" name="create_character" value="Create" />
</li>
</ul>
</fieldset>
</form>
<div class="class-info female-goblin-warrior">
<div class="avatar-box">
<img src="Female.Goblin.Warrior.gif" alt="Female Goblin Warrior" />
</div>
Goblin description.<br />
Warrior Description
</div>
<div class="class-info male-goblin-warrior">
<div class="avatar-box">
<img src="Male.Goblin.Warrior.gif" alt="Male Goblin Warrior" />
</div>
Goblin description.<br />
Warrior Description
</div>
<div class="class-info female-human-warrior">
<div class="avatar-box">
<img src="Female.Human.Warrior.gif" alt="Female Human Warrior" />
</div>
Human description.<br />
Warrior Description
</div>
<div class="class-info male-human-warrior">
<div class="avatar-box">
<img src="Male.Human.Warrior.gif" alt="Male Human Warrior" />
</div>
Human description.<br />
Warrior Description
</div>
<div class="class-info female-undead-warrior">
<div class="avatar-box">
<img src="Female.Undead.Warrior.gif" alt="Female Undead Warrior" />
</div>
Undead description.<br />
Warrior Description
</div>
<div class="class-info male-undead-warrior">
<div class="avatar-box">
<img src="Male.Undead.Warrior.gif" alt="Male Undead Warrior" />
</div>
Undead description.<br />
Warrior Description
</div>
<div class="class-info female-goblin-wizard">
<div class="avatar-box">
<img src="Female.Goblin.Wizard.gif" alt="Female Goblin Wizard" />
</div>
Goblin description.<br />
Wizard Description
</div>
<div class="class-info male-goblin-wizard">
<div class="avatar-box">
<img src="Male.Goblin.Warrior.gif" alt="Male Goblin Wizard" />
</div>
Goblin description.<br />
Wizard Description
</div>
<div class="class-info female-human-wizard">
<div class="avatar-box">
<img src="Female.Human.Wizard.gif" alt="Female Human Wizard" />
</div>
Human description.<br />
Wizard Description
</div>
<div class="class-info male-human-wizard">
<div class="avatar-box">
<img src="Male.Human.Wizard.gif" alt="Male Human Wizard" />
</div>
Human description.<br />
Wizard Description
</div>
<div class="class-info female-undead-wizard">
<div class="avatar-box">
<img src="Female.Undead.Wizard.gif" alt="Female Undead Wizard" />
</div>
Undead description.<br />
Wizard Description
</div>
<div class="class-info male-undead-wizard">
<div class="avatar-box">
<img src="Male.Undead.Wizard.gif" alt="Male Undead Wizard" />
</div>
Undead description.<br />
Wizard Description
</div>
CSS
.class-info {
display: none
}
的Javascript
var buildCharacter = function () {
var character = {
properties: {
gender: '',
race: '',
class: ''
},
getCss: function () {
return (this.properties.gender + '-' + this.properties.race + '-' + this.properties.class).toLowerCase();
}
};
for (var prop in character.properties) {
character.properties[prop] = $('#character_' + prop + ' :selected').text();
}
$('.class-info').hide();
$('.' + character.getCss()).show();
};
buildCharacter();
$('.select').on('change', buildCharacter);
我开始制作一个普通的Ajax课程，但我实际上并不认为它能够满足我的需求。
Ajax.php
<?php /* /application/modules/Ajax/Ajax.php */
/**
* Ajax
*
* The Ajax Class is used to get data from a Class and return the data.
*
*/
class Ajax
{
private $class;
private $method;
private $params;
/**
* __construct
*
* @access public
*/
public function __construct()
{
$this->params=$_POST; # Call params
$call=explode('->', $this->params['call']);
if(method_exists($call[0], $call[1]))
{
$this->class=new $call[0]; # e.g. controller->method
$this->method=$call[1];
unset($this->params['call']);
$this->parse();
}
else
{
throw new Exception('Method does not exist', E_RECOVERABLE_ERROR);
}
}
public function parse()
{
$param=array();
# Params in any order...
$ref_method=new ReflectionMethod($this->class, $this->method);
foreach($ref_method->getParameters() as $p)
{
$param[$p->name]=$this->params[$p->name];
}
$this->params=$param;
$result_data=call_user_func_array(array($this->class, $this->method), $this->params);
return $result_data;
}
} # End Ajax class.
答案 0 :(得分：0)
您应该创建像 ＆＃34; female_undead_wizard.html＆＃34;和＆＃34; male_goblin_warrior＆＃34;
然后，无论是在客户端还是服务器端，您都需要确定要加载到div中的html。 在服务器端做这样的事情通常更好，但在客户端更简单。
因此，例如在客户端，您可以收听所有选择的已更改事件，一旦您有足够的数据，您只需要将html加载到您的div中。 然后一个简单的加载（使用jquery）可以做到这一点 所以html代码看起来像：
...
<select id=genderSelect>...</select>
...
<div id="displayClassDiv"></div>
在剧本中：
var gender= $("#genderSelect option:select").val();
//get all vals and check that exists here
...
var fileName=gender + "_" + race + "_" + class + ".html";
$("#displayClassDiv").load("<some path goes here>/" + fileName);
答案 1 :(得分：0)
我不确定你的具体问题是什么。我理解你要做的是什么，但我不确定你的理解是什么，以及你还不了解哪些部分。这就是为什么我会尝试简要解释如何在jquery中使用ajax。
您可以使用ajax调用PHP函数，并在请求中添加额外的POST或GET数据。然后，您可以在PHP中使用该数据来交替返回的信息。
您可以使用此页面上的信息查看如何在js中设置ajax请求：http://api.jquery.com/jquery.ajax/ 但它可能看起来像这样：
j.ajax({
url: '/ajax.php',
data: {'characterClass': j('#character_class').val(), 'gender': j('#gender').val() },
type: 'GET',
success: function (data) {
//do stuff to show what you want
}
});
您可以看到我使用数据发送性别和字符类。
在您的PHP ajax文件中，您必须获取此数据（看起来好像您已经设置好使用$ _POST执行此操作）并返回您要返回的信息。你可能想要json_encode它。
在JS ajax的success函数中，您可以将信息插入页面。您可以使用数据变量。我喜欢使用console.log（数据）来查看数据的返回方式。
简而言之：
我希望这能回答（大部分或部分）你的问题。 祝你好运！