使用AJAX填充页面


Populating a page using AJAX

这对我来说是一个全新的领域,所以我希望有人能为我指明正确的方向,希望是一个好的教程?

我有一个带有下拉列表的页面,根据用户从列表中的选择,我需要填充页面。

有人能为我指出一个做类似事情的好教程的方向吗?

这是我需要做的事情的顺序:

  1. 页面加载
  2. 用户从HTML下拉列表中选择一个值
  3. 另一个PHP页面返回与该选择相关的数组

有人能帮我吗?

使用jQuery:

$('#id-of-your-select').change(function() {
  $.ajax({
    method: 'post',
    url: 'yourscript.php',
    data: '?theValue=of&your=dropdown',
    success: function(data) {
      $('#div-to-be-populated').html(data);
    }
  });
 });

以及在您的php:中

<?php
switch($_GET['dropdownvalue'] {
  case 'hello':
    echo '<p>Hello World<p>';
  break;
}
?>

对于couse,你必须根据自己的需要进行配置,但我希望你能了解

的基本想法

看看这个,http://www.w3schools.com/php/php_ajax_php.asp

本教程将使您成为AJAX和PHP方面的专家。

对于您的需求,您需要两个PHP页面和AJAX知识。

  1. PHP Page1(可能是HTML)加载正常页面
  2. 在浏览器上,您需要捕获下拉菜单中的"onChange"事件才能调用函数
  3. 在该函数下,向您的第二个PHP页面发出AJAX请求
  4. 使用PHP Page 2对返回的数据进行必要的处理

这是应该发生的事情的简单列表。

我想你对第一步没问题。

对于步骤2,您需要学习基本的javascript。只需谷歌如何捕捉onChange事件。很少有快速链接:通过javascript将下拉菜单中的所选项目更改为html标签,请帮助如何进行

对于步骤3,我建议不要走捷径,而是通过完整的AJAX教程http://www.w3schools.com/ajax/default.asp

一旦你完成了这个教程,你就可以自己动手了。

您可以使用jquery以一种非常简单的方式完成此操作。jquery是解决这类问题的最佳方案。重要环节包括:http://jquery.com此外,您还可以向w3schools学习,以获得更好的jquery知识。