Angularjs $ example of form submission implemented by http,

Angularjs $ example of form submission implemented by http,

Requirement: request a third-party background interface to return an html string as follows. The front-end implements form POST submission,

Note: form submit () automatically submits the input tag hidden. Pay attention to document. redirect. submit () in script code ();

In order to execute the previous string html code, the new property of the iframe tag HTML5-srcdoc
Srcdoc attribute of HTML <iframe> labels
<iframe srcdoc="HTML_code">
Example:
Copy codeThe Code is as follows:
<Iframe srcdoc = "<p> Hello world! </P> <script> alert (123); </script> "src =" demo_iframe_srcdoc.htm "> </iframe>


The problem arises.

After the form submit () is submitted, you cannot know the status of the form after it is submitted, because in terms of the process, you need to determine the status of the form submission success, failure, network connection, etc., with submit () submitted. These statuses cannot be obtained.

The solution is as follows:

1. Extract the value of the method, action, and name and value of the input form from the regular expression.
var formData = { method: 'POST', url: 'http://form_process.php', data: {aaa:'aaa_value',bbb:'bbb_value'}}
2. Send an ajax request

$ Http ({method: formData. method, url: formData. url, data: $ httpParamSerializerJQLike (formData. data), // pass in data as strings headers: {'content-type ': 'application/x-www-form-urlencoded '} // set the headers so angular passing info as form data (not request payload )}). success (function (data) {console. log (data); // returns an html string }). error (function (error) {console. log (error );});
There are two key points:

1. $ the value of the http parameter data needs to be processed using $ httpParamSerializerJQLike.

2. Add headers: {'content-type': 'application/x-www-form-urlencoded '}

If the above two processes are not performed, the request can also be successful (status return: 200), but the desired response result cannot be obtained in the successful callback.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.