Question

I have 3 clickable menu items on my page:

• option1
• option2
• option3

I also have 3 php files on my server:

• option1.php
• option2.php
• option3.php

To keep things simple, let’s say option1.php echoes the number 1, option2.php echoes the number 2, etc.

To avoid the page refreshing, I want to use AJAX, so when a user clicks option1, option1.php file will display the number 1. I hope I have made myself clear.

What is a good way to do this?

EDIT: I’ve reviewed my question again and have come up with a solution.
In my php file that contains my menu items I added an update area div.

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

My external javascript file contains onclick events which call a function that sends the menu item number to be processed by my AJAX php file. This tests my

$_GET[sent_data]

and if (for example) it equals 1, then it uses

require "option1.php";

Now that the functionality is working I can independently edit my option?.php files.

I’ve voted SomeKittens answer as the one that was most helpful.

Answer 1

At some point during your JavaScript code that sends the AJAX data back to the PHP, you’ll need to specify what PHP file you’ll be sending the data to. In vanilla JS, this is the ajaxRequest.open portion. Have your AJAX function take a string parameter (say phpfile) and then use the following snippet to select the php file in your AJAX function:

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

Your form elements would have the attrib onclick:

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

etc, etc.

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