Home > Developer > JavaScript

Javascript operation img solves website data submission exceptions

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article focuses on how to use Javascript to skillfully manipulate img to handle abnormal website submission data. You can submit data to server A in two steps, if server A cannot access server B, submit it to server B. For more information, see the following.

Use Javascript to skillfully manipulate img for website exception submission and Data Processing

The functions described in this article are as follows:

The form submits data to server A. If server A cannot access the form, the data is submitted to server B.

To use JS to implement the above functions, we need to consider cross-origin issues. We have used the ajax xmlhttp method to detect that the remote file does not exist and returns 404, this scheme is not used due to cross-origin issues in ajax during testing, and img onerror and onload events are also used for processing, however, this scheme will cause the submitted Form IE to pop up, And the browser intercepts the pop-up window, so this scheme is not used. What should I do? It took a long time to complete the process by using js operation img.
You may not understand what I mean after talking about it. If you don't care about it, you can see the code below.

Step 1: Create a test.htm file with the following content:

Code

 
 
    
  
  
  1.  
    2. 
  
  2. <scriptsrcscriptsrc="getMessage.js"></script> 
    3. 
  
  
  3. <body> 
    4. 
  
  
  4. <formnameformname="mfrm"> 
    5. 
  
  
  5. <inputidinputid="SendType"type="hidden"  
    6. 
  
  
  6. value="s129"name="SendType"/> 
    7. 
  
  
  7. <inputidinputid="title"name="title"/> 
    8. 
  
  
  8. <inputonClickinputonClick="returngetMessage(this.form);"
    9. 
  
  
  9. type="button"name="imageField"/> 
    10. 
  
  
  10. </form> 
    11. 
  
  
  11. </body> 
    12. 
  
  
  12.  
    13.

Step 2: Create the getMessage. js file with the following content:

Code

 
 
    
  
  
  1. FunctiongetMessage (frm ){
    2. 
  
  
  2. Varsendtype = frm. SendType;
    3. 
  
  
  3. Vartitle = frm. title;
    4. 
  
  
  4. // Create a simulated form
    5. 
  
  
  5. Varobjfrm = document. createElement ("form ");
    6. 
  
  
  6. Varobjsendtype = document. createElement ("input ");
    7. 
  
  
  7. Varobjtitle = document. createElement ("input ");
    8. 
  
  
  8. // Use the img operation to process the server page of the target receiving data
    9. 
  
  
  9. VarobjImg = document. createElement ("img ");
    10. 
  
  
  10. ObjImg. id = "TmpSmsImg ";
    11. 
  
  
  11. ObjImg. src = "http://www.xueit.com/images/logo.gif ";
    12. 
  
  
  12. // Default server a image
    13. 
  
  
  13. Document. body. appendChild (objImg );
    14. 
  
  
  14. VarimgWidth = document. getElementById ("TmpSmsImg"). width;
    15. 
  
  
  15. Document. body. removeChild (objImg );
    16. 
  
  
  16.  
    17. 
  
  
  17. If (imgWidth = "210") // if the image exists,
    18. 
  
  
  18. You can get the page of server A whose width is equal to the predefined value, which receives data by default.
    19. 
  
  
  19. {
    20. 
  
  
  20. Objfrm. action = "http://www.xueit.com/testGet.aspx ";
    21. 
  
  
  21. }
    22. 
  
  
  22. Else // The image does not exist. The page of server B that receives data
    23. 
  
  
  23. {
    24. 
  
  
  24. Objfrm. action = "http://demo.xueit.com/testGet.aspx ";
    25. 
  
  
  25. }
    26. 
  
  
  26.  
    27. 
  
  
  27. // The following table attributes
    28. 
  
  
  28. Objfrm. id = "TmpForm ";
    29. 
  
  
  29. Objfrm. name = "TmpForm ";
    30. 
  
  
  30. Objfrm.tar get = "_ blank ";
    31. 
  
  
  31. Objfrm. method = "post ";
    32. 
  
  
  32. Objfrm. style. display = "none ";
    33. 
  
  
  33.  
    34. 
  
  
  34. Objsendtype. type = "hidden ";
    35. 
  
  
  35. Objsendtype. name = "SendType ";
    36. 
  
  
  36. Objsendtype. value = Utf2Gb (sendtype );
    37. 
  
  
  37.  
    38. 
  
  
  38. Objtitle. type = "hidden ";
    39. 
  
  
  39. Objtitle. name = "title ";
    40. 
  
  
  40. Objtitle. value = Utf2Gb (title );
    41. 
  
  
  41.  
    42. 
  
  
  42. // Add
    43. 
  
  
  43. Objfrm. appendChild (objsendtype );
    44. 
  
  
  44. Objfrm. appendChild (objtitle );
    45. 
  
  
  45.  
    46. 
  
  
  46. // Form submission
    47. 
  
  
  47. Document. body. appendChild (objfrm );
    48. 
  
  
  48. Objfrm. submit ();
    49. 
  
  
  49. Document. body. removeChild (objfrm );
    50. 
  
  
  50.  
    51. 
  
  
  51. // Clearobj
    52. 
  
  
  52. Objtitle = null;
    53. 
  
  
  53. Objsendtype = null;
    54. 
  
  
  54. Objfrm = null;
    55. 
  
  
  55.  
    56. 
  
  
  56. }
    57. 
  
  
  57.  
    58. 
  
  
  58. // Process the encoding function
    59. 
  
  
  59. FunctionUtf2Gb (str)
    60. 
  
  
  60. {
    61. 
  
  
  61. If (str! = Null & str! = "")
    62. 
  
  
  62. Str = escape (str );
    63. 
  
  
  63. Returnstr;
    64. 
  
  
  64. }
    65. 
  
  
  65.  
    66.

The above code mainly uses img images. If the image server is running normally, the image will be loaded into the body area of the current page, so we can get the width of the img image, if the width is equal to the predefined value, the default server is normal. Otherwise, the Code server A is abnormal and the data is submitted to server B for processing.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More