Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve front-end interaction with JavaScript". In daily operation, I believe many people have doubts about how to achieve front-end interaction with JavaScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to achieve front-end interaction with JavaScript". Next, please follow the editor to study!

Form form

Basic knowledge

Concept

Tags are used to create HTML forms for user input, and forms are used to transfer data to the server.

Composition

Form label

Form fields: text box, password box, multiline text box, check box, radio box, drop-down selection box, file upload box, etc.

Form button button

Common attribut

Action: where to send the form when submitting it

The default value is the URL address of the current web page

After submission, the form jumps to the URL address set by the action property

Target: specify where to open action URL

The default _ self opens action URL in the same and frame (on the current web page)

Method: specifies how to submit the form to action URL

Post: submitted data is more hidden and suitable for large, complex or file uploads

Get: by default, you can see in the URL that the information submitted by the user is not secure and is suitable for a small amount of simple data

Enctype: specifies how to encode the form data before sending it

Form synchronous submission

Concept

Triggering the submit button causes the page to jump to action URL. The form has default submission behavior, which is synchronized by default. The action and method attributes inside the form tag are used to write synchronous submission behavior, synchronize form submission, and the browser will render the content responded by the server directly to the page.

Shortcoming

The page jumps

The status and data before the page will be lost.

Recommendation: the form is only responsible for collecting data, and Ajax is responsible for submitting the data to the server.

Form event monitoring

Submit snooping mode

$("form") Submit (function (e) {

Console.log ('submit listens for form events')

})

On snooping mode

$("form") On ('submit', function (e) {

Console.log ('on listens for form events')

})

Block form default behavior

$("form") On ('submit', function (e) {

E.preventDefault (); / / prevent the form from submitting by default

})

Serialize quickly gets the data submitted by the form

Syntax: $(selector). Serialize ()

Return value: the value of all form elements in the form form with the name attribute, linked with the & symbol

Form elements without a name attribute cannot be obtained!

Submit

$('# form1'). Serialize ()

/ / result of the call:

/ / username = value of user name & password = value of password

Template engine

Basic knowledge

Concept

The template engine (in this case, the template engine for Web development) is generated to separate the user interface from the business data (content). It can generate documents in a specific format, and the template engine for the website will generate a standard HTML document.

Advantages

Reduce the splicing of strings

The code structure is clearer.

Easy to maintain and read

Art-template template engine

Use

Import art-template

Define data

Define templat

Call the template function

Render HTML structur

Code structure:

I'm the container. I use it to hold the rendered structure.

{{name}}-{{age}}

/ / 2. Define data

Var data = {name: 'zs', age: 20}

/ / 4. Call the template function

Var htmlstr = template ('tpl', data)

/ / 5. Render HTML structur

$("# container") Html (htmlstr)

Effect display:

Standard grammar

Original text output: {{@ value}}: suitable for tagged content such as

Conditional output: if... Else if... / if

{{if value}} output {{/ if}}

{{if value1}} output content 1

{{else if value2}} output content 2

{{/ if}}

Loop output: each traversal array

{{each arr}}

{{$index}} {{$value}}

{{/ each}}

Filter: essentially a function function

Registration time: {{regTime | dataFormat}}

Template.defaults.imports.dataFormat = function (dates) {

Var date = new Date (dates)

Var y = date.getFullYear ()

Var m = date.getMonth () + 1

Var d = date.getDate ()

Var h = date.getHours ()

Var mi = date.getMinutes ()

Var s = date.getSeconds ()

M = m > 9? M: "0" + m

D = d > 9? D: "0" + d

H = h > 9? H: "0" + h

Mi = mi > 9? Mi: "0" + mi

S = s > 9? S: "0" + s

Return-- ${y}-${m}-${d} ${h}: ${mi}: ${s}--

}

Regular expression exec function: retrieves the matching of regular expressions in a string

At this point, the study on "how to achieve front-end interaction in JavaScript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.