Build a high-performance, lightweight webform framework that subverts your imagination-without refreshing new submission background (the fourth day), webform framework

Build a high-performance, lightweight webform framework that subverts your imagination-without refreshing new submission background (the fourth day), webform framework

 

Question 3: When webform is used, every time the background interface is submitted, refresh should be made. Can we make it the same as ajax when interacting with the background? The interface does not need to be refreshed, at the same time, the system can return parameters and continue to execute at the front-end ??

I believe many people share the same with me. This is also the most important reason why many developers have abandoned webform !! This is also why many people think webform is not good !!! In fact, the form submitted by mvc will also be refreshed, but the view does not have the same background as webfrom. Therefore, you must use ajax to submit the background, so it is not refreshed!

In fact, the solution to this problem has been solved many years ago, but there are not many people who know it. Therefore, we are always impressed that the interface is always refreshed when submitting webform to the background. Here, I provide two solutions that are common in our work and study.

The first method is to use jquery. form. js plug-in, we only need to set $ ("# form1 "). change sumit () to $ ("# form1 "). ajaxSubmit ();

For example:

Function ajaxGohoutai (fangfa, canshu, aftergo) {. // input parameters and method names at the front end. The execution method is automatically bound to the backend.
$ ("# Hid_fangfa"). val (fangfa );
$ ("# Hid_canshu"). val (canshu );

$ ("# Form1"). ajaxSubmit (function (result ){

Aftergo (result );

});

}

Instance:

<Input type = "button" onclick = "ajaxgo ()" value = "ajax submit 1 parameter"/> function ajaxgo () {ajaxGohoutai ("ajax ", "I am not a person", function (result) {alert (result );});}

The use of plug-ins is not our original intention. We hope to use our code to control the data we want and the data that can control form output, because we still don't know whether form forms can be submitted without refreshing new ones?

To understand these reasons, we must understand the attributes of form forms. In order to better understand the attributes of form forms, let's take examples of common shopping examples.

Form submission is actually a process of buying food. You need to prepare money for food purchase. This is marked by the name attribute in our form control, it tells us that these are what we need to submit.

To buy food, we need to know how to buy food, take a taxi or walk, or other methods. This is the method attributes of form, including post, get, delete, and put attributes.

Where can we buy food? Whether to go to the supermarket to buy food, go to the food market to buy food, or go to other places to buy food. This attribute is the attribute of our action. The system defaults to the background of the page address, in fact, we only need to change the address of the form1 form, and we can submit it to other pages.

After buying the food, where do we need to rewrite it? The layout here is the meaning of refresh. The default page address of the system, the default attribute of the system is target = "_ self", and the following are other attributes.

_ Blank	Open in a new window.
_ Self	Default value. Open in the same framework.
_ Parent	Open in the parent framework set.
_ Top	Open in the entire window.
Framename	Open in the specified framework.

The above attributes show that the target = "_ self" attribute is refresh on the page after the form is submitted. It points to itself. If you want to avoid refreshing the interface, after reading this, it seems that the target can only point to the value of an iframe name, and the interface does not seem to be refreshed. Let's give it a try !!!!! Based on the previous code, we only need to modify the submitted code to this type.

Step 1: Add a hidden iframe to the foreground.

<Iframe name = "_ NofreshIframe" id = "_ NofreshIframe" style = "display: none;"> </iframe>

Step 2: modify our previous method. In form submission, point target to the value of iframe, so that we don't need to refresh the submission.

For example:

$ ("# Form1"). attr ("target", "_ NofreshIframe ");
$ ("# Form1"). submit ();

Then we test and find that the interface has not been refreshed, and the interface can be submitted to the background without any refreshing.

But we found that this still cannot achieve the desired effect. What effect does it have? We need to be able to execute the front-end immediately after the execution in the background and pass the parameters to the front-end. Simply put, we need to achieve the same effect as ajax !!!!!

No way, you can solve the problem in the next phase !!!!!!!