根据下拉响应更新div而不刷新

Question

我试图创建一个下拉菜单，它将更新页面上的文本而不刷新页面。更新后的文本将由一个php函数提供，该函数从下拉列表中传递一个值。现在，我的下拉什么也不做，但这里是我已经成功地得到：

webpage.php：

我的下拉列表。由数据库填充。

<form method='post'> 
    <select name="skill1_level" id="skill1_level" onchange="skill1ValueChange(this.value)"> 
     // PHP to dynamically populate list from the DB 
     <?php foreach ($skill_levels as $key => $skill_levels_list): ?> 
      <option value=""><?= $skill_levels_list->skill_level ?></option> 
     <?php endforeach ?> 
    </select> 
</form> 

我的div。目前只是加载一个默认字符串。在提交下拉列表时，需要弄清楚如何进行此更改。不知道如何在这里使用AJAX。

<div class="panel-body" id="skill1_text"> 
    <?php echoSkill($hero->skill1_desc, $placeholders, $id_hero, 1, 1, $dbh); ?> 
</div> 

functions.js。提交下拉列表时将调用Javascript。调用PHP函数。

function skill1ValueChange(skill_level) { 

$.ajax({ 
    url: 'functions.php', 
    type: 'POST', 
    data: {option : skill_level}, 
    success: echoSkill($hero->skill1_desc, $placeholders, $id_hero, 1, skill_level, $dbh) { 
     console.log("Data sent for skill1."); 
    } 
}); 

functions.php。根据下拉值对我的数据做一些操作，然后回显结果字符串。

function echoSkill ($skill_desc, $placeholders, $id_hero, $skill_num, $skill_level, $dbh) { 
    $skill_values = fetchSkillValues($id_hero, $skill_num, $skill_level, $dbh); 
    $skill_values = array($skill_values[0]->skill_x, $skill_values[0]->skill_y, $skill_values[0]->skill_z, $skill_values[0]->skill_a); 
    $skill_desc = str_replace($placeholders, $skill_values, $skill_desc); 
echo $skill_desc; 
} 

任何帮助和解释，你可以提供将不胜感激！

Answer 1

也许最简单的，你会从你的functions.php返回HTML（实际上，你应该有它引用一个不同的页面，其中包括functions.php页面和回声的echoSkill()功能）文件：

页与下拉：

<!-- I assume you already have the libraries...--> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 

<form method='post'> 
    <!--You can just add the change in the jQuery instead of inline js --> 
    <select name="skill1_level" id="skill1_level"> 
      <option value="1">Value 1</option> 
      <option value="2">Value 2</option> 
      <option value="3">Value 3</option> 
      <option value="4">Value 4</option> 
    </select> 
    <!-- This is where your empty div will fill with the php content --> 
    <div class="panel-body" id="skill1_text"></div> 
</form> 

<script> 
// Select by the <select> named "skill1_level" 
// When changed... 
$("select[name='skill1_level']").change(function() { 
    // Assign the selection's value 
    var OptionVal = $(this).val(); 
    $.ajax({ 
      url: 'functions.php', 
      type: 'post', 
      data: { option: OptionVal }, 
      // You need a success function here 
      success: function(response) { 
       // This will print out the response from your php page 
       // to the div on this page called "skill1_text" 
       $("#skill1_text").html(response); 
      } 
    }); 
}); 
</script> 

的functions.php

<?php 
    //code here to return just the text or whatever 
    // You should actually have the ajax call a page that has the "echoSkill()" 
    // function on it rather than the function page itself 
    echo 'Response to ajax page.'; 
    echoSkill($blah,$blah2,$blah3,$blah4,$blah5,$blah6); 
    print_r($_POST); 
?>