Better way to return data via AJAX?
First of all, you should read about MVC.

There are a lot of tutorials out there, as well as frameworks (like CodeIgniter) that implement it. Basically your code should be divided into 3 main categories:


Controllers - where all logic should be placed like validations, checks. This is also where Views and Models are used, hence "controller"
Models - basically the source of data. Usually this is the abstraction of the data storage (databases, sessions, external requests) in the form of functions.
Views - the presentation, or in this case, the HTML.


Reasons to use MVC or MV* patterns is


Portability. 

The files, especially the views and models, can be plucked out of the architecture, and be used elsewhere in the system without modification. 

Models are simply function declarations one can just plug in the controller and call their functions. Views are simply layouts that, when plugged with the right values, display your data. They can be used and reused with little or no modification unlike with mixed code.
Purpose-written code and Readability

You would not want your HTML mixed with the logic, nor the data gathering mechanism. This goes for all other parts of your code. For example, when you edit your layout, all you want to see on your screen is your layout code, and nothing more.


Never, and I mean NEVER return marked-up data using AJAX (use JSON).

The main reason AJAX is used is because it's asynchronous. This means no page-loading, no more request-wait-respond, and you could do stuff in parallel. It's pseudo-multitasking for the human.

On the same train of thought, the reason why JSON was created was because XML was too heavy for data transfer and we needed a lightweight, data transport format. XML is NOT a data-transport format but a document and mark-up language (Though by "X" for extensibility, it has served a lot of purposes beyond document).

Use client-side templating

JavaScript engines have become fast these days that even developers create parsers/compilers on JavaScript. And with that comes client-side templating, like Mustache.

Coupled with raw data from JSON, which is very light, you can integrate that data into a template to form your view and have JavaScript display it, like you already do.

Have a rendered version and a data version

Taking into account the previous answer, if you are making a website rather than a web app, where JS is optional rather than required, one should create a website that works without JS. 

However, for the same data but different format, the URL should not change (much). You should then take into account in the request what data type is requested by the client. And so you must accept a parameter which indicates the data type.

An example url would look like this:

//for a website page format (default: HTML):
http://example.com/my/shop/available/items.php

//for the JSON version
http://example.com/my/shop/available/items.php?format=JSON

//for the XML version
http://example.com/my/shop/available/items.php?format=XML


This means, that for the same page (available items), you have 3 formats you can use. This can be seen in the Joomla Framework (the framework that powers the Joomla CMS)

With these 3 tips, your code will be cleanly separated and purposely written (MVC), fast on transport and rendering (JSON + client-side templating) and extensible (multi-format support).