Ajax: return data to achieve two provinces linked to the page

Copyright: https://blog.csdn.net/qq_39263750/article/details/90372597

Here Insert Picture Description
xml format:
Here Insert Picture Description

Browsers have xml data read method, various analytical methods provided by different browsers.

Now Ajax technology, data is transmitted to the server using a clientJSONformat.

Js Json format is a standard format that all browsers support.

Input data validation is completed (synchronization request) by lost focus event

After a user name input, mouse out when it is judged that the input format
Here Insert Picture Description

写servlet
Here Insert Picture Description

Here Insert Picture Description
This will result in a non-compliance after the first judgment, the page will refresh, enter the back no more.

By ajax, asynchronous way to send a request to get

Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description

The value of the last transmission of the text box in the form of key-value pairs
Here Insert Picture Description
In this case, after the judgment does not meet the first page does not refresh, enter the back remains.

In their own time to step on the test pit: jquery previous import statements are a direct copy of today write their own url, found
Here Insert Picture Description
here to add a slash. Otherwise, the package can not be found


Ajax underlying code (native code):

JavaScript send asynchronous requests, you need a core object XMLHttpRequest, but different in different browsers ground floor, so we can create a core object.

Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description

If you use the Post method, you need to change:
Here Insert Picture Description


Here Insert Picture Description

The use of a post request: one only needs to change.
Here Insert Picture Description

Here Insert Picture Description
This sentence acquisition request by the servlet type inside.


Json format:

Here Insert Picture Description

Standard json format:

It means a single array
Here Insert Picture Descriptionjson: ,

a plurality of array means json
Here Insert Picture Description
concept JS not set, instead of using an array
to traverse the array:
Here Insert Picture Description

Ajax request server, the server responds a json string.
Here Insert Picture Description
The above is a first double escape into the single quote

The second method is to write directly in single quotes inside double quotes.

Because the server is passed over a json string, instead of json data we want, so to get rid of double quotation marks:
method of removing the double quotation marks:
Here Insert Picture Description

Application:
Here Insert Picture Description
This will remove the double quotes. Json data into a standard, then operation.

Examples of the full version:
Here Insert Picture Description


The actual use of time and then does not need to define json but will be reflected directly. Well. How json is constructed?
Using third-party jar package.
Here Insert Picture Description


Of Ajax provinces, municipalities and two linkage.

1. The establishment of a database and put the data.
There is a problem, insert after the establishment of the foreign key table does not work well, so use sql query to create a second table, the establishment of a foreign key
Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description

2. Establish a connection to the database connection pool c3p0.
3. Establish bean class.

Here Insert Picture Description
Here Insert Picture Description

4. Establish dao layer, set the query.
Here Insert Picture Description
Here Insert Picture Description

  1. There is no written business layer in order to save, write directly servlet
    Here Insert Picture Description
    Here Insert Picture Description

6. Edit the jsp page.
Here Insert Picture Description
Here two drop-down boxes to set a id. After the time for delivery to the data entered by ajax good to find this node splicing

Here Insert Picture Description

success.


jQuery's each method:

Here Insert Picture Description
element here, and should correspond to the following:

Here Insert Picture DescriptionHere Insert Picture Description

jQuery inside: gt (index) Method: selector

Here Insert Picture Description

Method jQuery inside .change

Here Insert Picture Description

Guess you like

Origin blog.csdn.net/qq_39263750/article/details/90372597
Recommended