Step by step to create a beautiful news list (without refreshing new pages, Content preview) Step 1

No paging. In this way, if the data size is large, the situation becomes very bad. It usually takes a long time to open a webpage, greatly reducing the user experience.
Paging is also very exquisite. Different databases often correspond to different paging methods. We will not discuss it here. Next, we will use simple access as the database for refreshing the news list. No refreshing means ajax technology is needed. Of course, no refreshing is not just ajax, but there are other ways to do no refreshing, such as reading all the data at once, then we can display different content based on different pages. This can be achieved only by using JavaScript, but it is definitely a result of drinking and quenching thirst. It is the same as the above without paging effect, it just feels good.

You can manually write or use the Framework to use ajax. I prefer to use jquery to write ajax, and vs2010 provides great support for jQuery. For paging, jQuery already has ready-made Plug-ins for our use.

The first step for creating beautiful news is: requirement analysis.

When you do anything, you must know what your needs are. Otherwise, you will find that this does not meet your needs after a long time.

Our requirements are as follows:

1. Dynamic News list (this is simple)

2. News lists can be read by PAGE (this is not difficult)

3. You can read the news list without refreshing the new pages (this is a little difficult)

4. You can preview the news content (this is a little difficult)

5. User-friendly (this is required)

The following describes our requirements in detail:

I will not describe 1, 2, and 5. I can find a lot of information on the Internet. Let's talk about the third and fourth points. In fact, if you understand ajax, these are pediatrics.

3. =: Click the next page to trigger the event, call ajax to search for the data on the next page in the database, and return the data on the page.

4 = preview the news content. When you move the cursor over the connection, the event is triggered. Obtain the news id and use ajax to search for the corresponding news content in the database. Part of the news content is captured and displayed in the div, note that if the intercepted content contains html tags, pay special attention to them.

 

OK. After the requirement analysis is completed, we started to do it. Prepare the following environment:

Vs2010 + access + jquery

Development Environment vs can also use 2008sp1, because later versions provide smart prompts for jQuery. Of course, other versions can also be used, that is, there is no smart notification effect.

The access database version is 2003.

Jquery: Version 1.3.2 or later

Of course, there are other files that need to be used. This will be explained later. Let's preview the final effect first: (the preview part of the page is covered .....)

 

Note: the objects in this article are mainly new to ajax, or those who have never been involved, but want to quickly use ajax to make things.