using ajax to load content from php file without jquery

[ahmad.ku]

i have a home page with some links that i want to let users to switch Categories from one to other (without page refresh).

i mean (loading content from PHP file that connects with database to get posts in the category that visitors want to get, based on the tags that will be clicked by visitors, also making the Clicked link active, by appending class=”active”)

so i want to use PHP, ajax and JSON if needed. but i don’t want to use jquery.

Could you please Help me?

here is what i have right now

<div class="category-links">
<p class="cat-archive"><span> showing results from </span>
<a href="#" class="active">general</a>
<a href="#">mobile</a>
<a href="#">Computer</a>
<a href="#">internet</a>
</p>
</div>

<div id="recent">
<div class="postbox">
//Loaded content goes Here
</div>
</div>

[Beverleyh]

You can pick apart the logic from this PHP & AJAX demo http://blog.fofwebdesign.co.uk/23-click-counter-with-flat-file-storage-text-file-ajax-php
Plain JS/AJAX posts a request (a query string) to a PHP file, which processes the data and echos it back to the web page. It’s a click-counter but you should be able to substitute in your own PHP code for querying your database.

To offer any specific help/suggestions, you really need to provide your own code though, and link to any tutorials you’ve followed, or other research you’ve done.

[AndyMW]

It doesn’t make sense to use low-level Ajax code anymore when great coders have produced solutions that are easy to use such as https://github.com/mzabriskie/axios

[Beverleyh]

For a larger scale project, axios could be a good choice. However we do not know what level of project this is for, or the intentions behind the post; for the OP to learn as part of a personal website, or gather ready-made solutions for a corporate entity. Maybe I’m reading deeper between the lines than ahmad.ku intended; I’m interpreting “no jQuery” to mean “no libraries” in the broader sense – the basic Ajax demo works and is simple enough for anyone to pick apart if they so wish… maybe even learning a bit of something along the way, or prompting further research, or indeed, other useful suggestions from the community. You say “low level” code, I say “established” and “does the job”, afterall this is a bare-bones method that’s been out in the wild for years.

[JackL11]

First of all to make ‘active’ on click on the links use the code. Here you will have to remove all the other ‘active’ class from the ‘a’ tag then only apply the ‘active’ class on the ‘anchor’ which is clicked. You can use the jQuery Each method to do this removal of class.
The code below shows how to do it.

$(".category-links a").click(function(){
    $(".category-links a").each(function (index, value) { 
        $(this).removeClass("active");
    })
    $(this).addClass("active");
});

For the ajax call you have make the call to fetch data from .functions.php file. Check this link – JavaScript AJAX.

[Author]

Posts