iframe提交 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 var iframe = document .createElement ("iframe" );iframe.name = "myTarget" ; window .addEventListener ("load" , function ( ) { iframe.style .display = "none" ; document .body .appendChild (iframe); }); function sendData (data ) { var name, form = document .createElement ("form" ), node = document .createElement ("input" ); iframe.addEventListener ("load" , function ( ) { alert ("Yeah! Data sent." ); }); form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" ; form.target = iframe.name ; for (name in data) { node.name = name; node.value = data[name].toString (); form.appendChild (node.cloneNode ()); } form.style .display = "none" ; document .body .appendChild (form); form.submit (); document .body .removeChild (form); }
XMLHttpRequest 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 function sendData (data ) { var XHR = new XMLHttpRequest (); var urlEncodedData = "" ; var urlEncodedDataPairs = []; var name; for (name in data) { urlEncodedDataPairs.push (encodeURIComponent (name) + '=' + encodeURIComponent (data[name])); } urlEncodedData = urlEncodedDataPairs.join ('&' ).replace (/%20/g , '+' ); XHR .addEventListener ('load' , function (event ) { alert ('Yeah! Data sent and response loaded.' ); }); XHR .addEventListener ('error' , function (event ) { alert ('哎呀!出了问题。' ); }); XHR .open ('POST' , 'https://example.com/cors.php' ); XHR .setRequestHeader ('Content-Type' , 'application/x-www-form-urlencoded' ); XHR .send (urlEncodedData); }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 function sendData (data ) { var XHR = new XMLHttpRequest (); var FD = new FormData (); for (name in data) { FD .append (name, data[name]); } XHR .addEventListener ('load' , function (event ) { alert ('Yeah! Data sent and response loaded.' ); }); XHR .addEventListener ('error' , function (event ) { alert ('Oups! Something goes wrong.' ); }); XHR .open ('POST' , 'http://ucommbieber.unl.edu/CORS/cors.php' ); XHR .send (FD ); }
例子:
1 2 3 4 5 <form id ="myForm" > <label for ="myName" > 告诉我你的名字:</label > <input id ="myName" name ="name" value ="John" > <input type ="submit" value ="提交" > </form >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 window .addEventListener ("load" , function ( ) { function sendData ( ) { var XHR = new XMLHttpRequest (); var FD = new FormData (form); XHR .addEventListener ("load" , function (event ) { alert (event.target .responseText ); }); XHR .addEventListener ("error" , function (event ) { alert ('哎呀!出了问题。' ); }); XHR .open ("POST" , "http://ucommbieber.unl.edu/CORS/cors.php" ); XHR .send (FD ); } var form = document .getElementById ("myForm" ); form.addEventListener ("submit" , function (event ) { event.preventDefault (); sendData (); }); });
发送二进制数据 使用append 方法将要发送的二进制数据添加进去。
1 2 3 4 5 6 7 8 9 10 11 <form id ="myForm" > <p > <label for ="i1" > 文本数据:</label > <input id ="i1" name ="myText" value ="一些文本数据" > </p > <p > <label for ="i2" > 文件数据:</label > <input id ="i2" name ="myFile" type ="file" > </p > <button > 提交</button > </form >
上面是一个普通的表单,包含一个文件输入框,下面是要执行的JavaScript代码.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 window .addEventListener ('load' , function ( ) { var text = document .getElementById ("i1" ); var file = { dom : document .getElementById ("i2" ), binary : null }; var reader = new FileReader (); reader.addEventListener ("load" , function ( ) { file.binary = reader.result ; }); if (file.dom .files [0 ]) { reader.readAsBinaryString (file.dom .files [0 ]); } file.dom .addEventListener ("change" , function ( ) { if (reader.readyState === FileReader .LOADING ) { reader.abort (); } reader.readAsBinaryString (file.dom .files [0 ]); }); function sendData ( ) { if (!file.binary && file.dom .files .length > 0 ) { setTimeout (sendData, 10 ); return ; } var XHR = new XMLHttpRequest (); var boundary = "blob" ; var data = "" ; if (file.dom .files [0 ]) { data += "--" + boundary + "\r\n" ; data += 'content-disposition: form-data; ' + 'name="' + file.dom .name + '"; ' + 'filename="' + file.dom .files [0 ].name + '"\r\n' ; data += 'Content-Type: ' + file.dom .files [0 ].type + '\r\n' ; data += '\r\n' ; data += file.binary + '\r\n' ; } data += "--" + boundary + "\r\n" ; data += 'content-disposition: form-data; name="' + text.name + '"\r\n' ; data += '\r\n' ; data += text.value + "\r\n" ; data += "--" + boundary + "--" ; XHR .addEventListener ('load' , function (event ) { alert ('✌!数据已发送且响应已加载。' ); }); XHR .addEventListener ('error' , function (event ) { alert ('哎呀!出了问题。' ); }); XHR .open ('POST' , 'https://example.com/cors.php' ); XHR .setRequestHeader ('Content-Type' ,'multipart/form-data; boundary=' + boundary); XHR .send (data); } var form = document .getElementById ("myForm" ); form.addEventListener ('submit' , function (event ) { event.preventDefault (); sendData (); }); });