Javascript-mobile phone form submission page. if the network is slow, the form will be submitted twice.

When a mobile website submits pages, the network is normal. when the network is slow, the mobile page is always loading, but the Fiddler crawls the same content twice. how can this problem be avoided? When a mobile website submits pages, the network is normal. when the network is slow, the mobile page is always loading, but the Fiddler crawls the same content twice. how can this problem be avoided?

Reply content:

When a mobile website submits pages, the network is normal. when the network is slow, the mobile page is always loading, but the Fiddler crawls the same content twice. how can this problem be avoided?

My approach is to generate a token on the server, and verify the token when submitting. this is the first verification, and the second verification is when the form is submitted.
Set the submit button to disabled. generally, perform a second verification.

// Submit the form data to the background for processing $. ajax ({type: "post", data: studentInfo, contentType: "application/json", url: "/Home/Submit", beforeSend: function () {// disable the button to prevent repeated submission $ ("# submit "). attr ({disabled: "disabled"}) ;}, success: function (data) {if (data = "Success ") {// clear the input box clearBox () ;}}, complete: function () {$ ("# submit "). removeAttr ("disabled") ;}, error: function (data) {console.info ("error:" + data. responseText );}});

Csrf verification class

  GetRequest ()-> isPost () {// | try {// | # verify TOKEN // | NoCSRF: check ('csrf _ token ', $ _ POST, true, 60*10, false); // 60*10 is 10 minutes (null is not the verification time) // | $ result = 'csrf check passed. form parsed. '; // | // $ this-> getRequest ()-> getPost ('field'); // | echo $ result; // |} catch (Exception $ e) {// | echo $ e-> getMessage (). 'form ignored. '; // |} else {// | # generate TOKEN // | $ token = NoCSRF: generate ('csrf _ token '); // | $ this-> getView ()-> assign ('token', $ token); // | $ this-> getView () -> display ('page'); // |} // | // front-end // |// + Define class NoCSRF {protected static $ doOriginCheck = false;/*** Check CSRF tokens match between session and $ origin. * Make sure you generated a token in the form before checking it. ** @ param String $ key The session and $ origin key where to find the token. * @ param Mixed $ origin The object/associative array to retreive the tok En data from (usually $ _ POST ). * @ param Boolean $ throwException (Facultative) TRUE to throw exception on check fail, FALSE or default to return false. * @ param Integer $ timespan (Facultative) Makes the token expire after $ timespan seconds. (null = never) * @ param Boolean $ multiple (Facultative) Makes the token reusable and not one-time. (Useful for ajax-heavy requests ). ** @ return Boolean Returns FALSE if a CSRF attack is detected, TRUE otherwise. */public static function check ($ key, $ origin, $ throwException = false, $ timespan = null, $ multiple = false) {$ session = Session: getInstance (); if (! $ Session-> has ('csrf _'. $ key) if ($ throwException) throw new \ Exception ('missing CSRF session token. '); else return false; if (! Isset ($ origin [$ key]) if ($ throwException) throw new \ Exception ('missing CSRF form token. '); else return false; // Get valid token from session $ hash = $ session-> get ('csrf _'. $ key); // Free up session token for one-time CSRF token usage. if (! $ Multiple) $ session-> forget ('csrf _'. $ key); // Origin checks if (self: $ doOriginCheck & sha1 ($ _ SERVER ['remote _ ADDR ']. $ _ SERVER ['http _ USER_AGENT '])! = Substr (base64_decode ($ hash), 10, 40) {if ($ throwException) throw new \ Exception ('form origin does not match token origin. '); else return false;} // Check if session token matches form token if ($ origin [$ key]! = $ Hash) if ($ throwException) throw new \ Exception ('invalid CSRF token. '); else return false; // Check for token expiration if ($ timespan! = Null & is_int ($ timespan) & intval (substr (base64_decode ($ hash), 0, 10) + $ timespan <time () if ($ throwException) throw new \ Exception ('csrf token has expired. '); else return false; return true;}/*** Adds extra useragent and remote_addr checks to CSRF protections. */public static function enableOriginCheck () {self: $ doOriginCheck = true;}/*** CSRF token generation method. afte R generating the token, put it inside a hidden form field named $ key. ** @ param String $ key The session key where the token will be stored. (Will also be the name of the hidden field name) * @ return String The generated, base64 encoded token. */public static function generate ($ key) {$ session = Session: getInstance (); $ extra = self: $ doOriginCheck? Sha1 ($ _ SERVER ['remote _ ADDR ']. $ _ SERVER ['http _ USER_AGENT ']): ''; // token generation (basically base64_encode any random complex string, time () is used for token expiration) $ token = base64_encode (time (). $ extra. self: randomString (32); // store the one-time token in session $ session-> put ('csrf _'. $ key, $ token); return $ token;}/*** Generates a random string of given $ length. ** @ par Am Integer $ length The string length. * @ return String The randomly generated string. */protected static function randomString ($ length) {$ seed = 'hangzhou'; $ max = strlen ($ seed)-1; $ string = ''; for ($ I = 0; $ I <$ length; ++ $ I) $ string. =$ seed {intval (mt_rand (0.0, $ max) }; return $ string ;}}?>

It must be one click and one commit. it is impossible for you to click and submit twice because of the slow network. how can the event trigger be the same as that of rootless water? If this happens, it must be a problem with your code.

Well, it's not that complicated.

Check the two requests.headerIs the first request down? exclude whether it isTwo clicks(If it is caused by a click, the click event of the dom element is disabled after the click), orCode.

By the wayRequest codeAndFiddlerThe captured data.

There are roughly two reasons for the submission:
1. click the event to trigger twice (in this case, regardless of the speed of the network)
This is mostly caused by some js plug-ins that need to be processed by google.iscroll.jsThe event may be executed twice. There are many solutions on the Internet.
Second, the network is busy, users can't wait, multiple clicks
Be sureajaxFront buttondisabledIf the form can be submitted multiple timesajaxThendisabledRemove.