Repeated submission of web Front-end protection and repeated submission of web Protection

Repeated submission of web Front-end protection and repeated submission of web Protection
Prevent repeated submission in front-end web development

Web Front-end data requests or forms are often submitted through dom click events, but often because they think that clicking too quickly (a young man is very fast ), or, because of the user's waiting for response, the user repeatedly clicks without human operation, resulting in the continuous and repeated submission of form data, resulting in poor user health check and even affecting the security of the entire system. The front-end Prevention and Control repeated submission is at least effective in preventing a lot of unnecessary troubles in human operations. The following describes how to effectively avoid repeated submission of front-end forms.

Form submission can be performed in the following ways:

<Form name = "form" method = "post" action = "#"> <input type = "submit" name = "submit" value = "submit"> </form>

In addition, there is also a common method to use images: the code is as follows:

<form name=”form” method=”post” action=”# "> <input type=”image” name=”submit” src=”btnSubmit.jpg”> </form> 

The third method is to use the link to submit the form and use the javascript DOM model: the code is as follows:

<Form name = "form" method = "post" action = "#"> <a href = "javascript: form. submit (); "> submit </a> </form>

In fact, this is submitted through js. It can be understood

$("form").find("a").click(function(){           $("form").submit();　　});

Js can be used for the first and second types:

$("input[type='submit']").click(function(){　　　　$("form").submit();　　});$("input[name='submit']").click(function(){　　　　$("form").submit();　　});

In short, the form is submitted. Of course, there are still some forms to be submitted and some requests must be prevented from being repeated. For example, the ajax request to respond to an event (submit data)

 $.ajax({            url: url,            type: "post",            data: data,            success: function (data) {               callback;            }});    

In this case, the network and performance factors of the preceding submissions and requests may cause repeated network response failures and multiple event responses, unless you click (trigger event) before the response is submitted) it is regarded as invalid. After the current response is complete, the system will respond to the next request.

If the form button is used, we can delete the button after clicking it.

$("input[type='submit']").click(function(){   $(this).attr("disabled",　true);　$("form").submit();});

In principle, if you set the "disabled" button to "true" after clicking the button, the button will not be able to be clicked after the second click, however, when you do this, you will find that the form you click for the first time cannot be submitted normally (it seems that it is not supported only after the h5 standard, regardless of the h5 standard browser, I tried to try it.) It seems that disabled affects the submission of the form, so it does not work if it is submitted first and then disabled.

$("input[type='submit']").click(function(){  　$("form").submit(); $(this).attr("disabled",　true);});

 

The experiment results will not work either. We cannot guess that the submit () callback is executed at the end of the click function and. the submit () function should make a judgment on disabel (assuming this is the principle of the browser's internal mechanism). If it is disabled in the current interaction cycle, it cannot submit.

In this case, disabled can be used to prevent duplication with code logic.

$("input[type='submit']").click(function(){   if(!$(this)[0].repeat){        $(this)[0].repeat=true;        $（"form").submit();   }});

If the button currently clicked does not have a repeat, the repeat attribute is submitted and set to true. If this attribute is found in the second time, the repeat attribute is not submitted, it seems that this logic will prevent repeated submissions, but the facts will always be cruel!

Yes, it will be submitted again when the click is too fast. This is because, if the submit is not executed in the click, the default html type = submit input click operation will submit the form, A complete example

<Form name = "form" method = "post" action = "#"> <input type = "submit" name = "submit" value = "submit"> </form>

 

 

<Form name = "form" method = "post" action = "#"> <input type = "submit" name = "submit" value = "submit"> </form>

$("input[type='submit']").click(function(){   console.log("here is click too!");});

 

 

<form name=”form” method=”post” action=”#"> 

<Div> submit </div>

</form>

$("form").find("div").click(function(){

　　$("form").submit();

});

All three codes are a results submission form, !!!!!!!!!! We found that not the submit button is disabled in the current interaction cycle (one click-> response-> callback) to prevent form submission. OK, the code is displayed on the teenager.

$("form").find("div").click(function(){

  if(!$(this)[0].repeat){ 
　　 $(this)[0].repeat=true;
 　　$(this).closest("form").submit();
  }else{
　　 $(this).attr("disabled",　true); }

});

No. disabeld fell when I clicked for the second time, so I won't submit the second time only when I succeeded for the first time!

Of course, it would be easier for other dom elements to prevent repeated clicks.

$("div").click(function(){
　　if(!!$(this)[0].isRepeat){
　　　　return;
　　}

   $(this)[0].isRepeat=1;

　　    　$.ajax({

 url: url, type: "post", data: data, success: function (data) {
　　　　　　　　$(this)[0].isRepeat＝0；
　　　　　　　　callback; 
　　　　　　} 
　 }); 

}); 

Because the submit () will refresh the attempt, but ajax will not. Therefore, after the callback, You need to assign the attribute that judges the repetition to false.

Is this simpler? I think you will think so!