How to improve the architecture of my website?

Question

The following picture is my web architecture.This is my first website too.This site is a kind of control panel, thus it is composed of many buttons and events.As the requirement becomes more and more, it becomes hard to maintain. Web Architecture

Let's say if I need to add a new function, I need:
1. UI : design Input & output.
2. create event handler by jquery.
3. create ajax function. (draw the results on success function)

It is just like a chain.The problem is:
1.change one thing = change every thing.
2.Can't manage the output view very well(the output view can be a table, options, label..)

So I'm curious about does there exist any framework or better way can help me?

Thanks.

Answer 1

Your project might be having a "jQuery soup" problem, but to answer your question there's just too many MV* JS "frameworks" around, e.g. Ember.js, AngularJS, Backbone.js to name a few.

IMO Backbone.js is easiest to fit into an existing project in case you want to slowly refactor your existing code. There are others that are more opinionated and do a lot more for you, but you may require more substantial refactorings in your JS code.

All the above "frameworks" will help you with managing models, the views, events, and tying everytihng back to the server.