Question

我的页面上有3个可点击的菜单项：

选项1

选项2

选项3

我的服务器上还有3个php文件：

option1.php

option2.php

option3.php

为了简单起见，让我们说option1.php回显数字1，option2.php回显数字2，等等。

为了避免页面刷新，我想使用AJAX，所以当用户点击option1时，option1.php文件将显示数字1.我希望我已经清楚了。

这样做的好方法是什么？

编辑：我已经再次审核了我的问题并提出了解决方案。在我的包含我的菜单项的php文件中，我添加了一个更新区域div。

<div id="update_area">
</div>

我的外部javascript文件包含onclick事件，这些事件调用一个函数，该函数发送要由我的AJAX php文件处理的菜单项编号。这测试我的

$_GET[sent_data]

如果（例如）它等于1，那么它使用

require "option1.php";

既然功能正常，我可以独立编辑我的选项？.php文件。

我投票给SomeKittens作为最有帮助的答案。

Answer 1

在JavaScript代码中将AJAX数据发送回PHP的某个时刻，您需要指定要将数据发送到的PHP文件。在vanilla JS中，这是ajaxRequest.open部分。让您的AJAX函数采用字符串参数（比如phpfile），然后使用以下代码片段在AJAX函数中选择php文件：

ajaxRequest.open("GET", phpfile, true);

您的表单元素将包含attrib onclick：

onClick="myAJAX('option1.php')"

等等。

http://www.tizag.com/ajaxTutorial/

Answer 2

以下是Javascript和HTML的起点，用于检索数据并使用AJAX在页面上显示数据。

Javascript （包含jQuery之后）

function getDataForOption(num) {
    $.ajax(function() {
        url: "option" + num + ".php",
        success: function(data) {
            $('#results').html(data);
        }
    });

    return false;
}

<强> HTML

<div id="results"></div>
<a href="#" onclick="getDataForOption(1);">Option 1</a>
<a href="#" onclick="getDataForOption(2);">Option 2</a>
<a href="#" onclick="getDataForOption(3);">Option 3</a>

Answer 3

$('.link').on('click', function() {
  $.get($(this).attr('href'), function(r) { $('#container').html(r) });
});

Answer 4

正如你所说，你需要使用AJAX。当有人点击option1时，它会将选项的值传递给函数。该值将决定请求应该在哪个页面上。通过AJAX和onSuccess发送请求，显示输出。

使用AJAX需要特定的php文件

4 个答案: