ارسال فرم HTML با جاوا اسکریپت — راهنمای جامع

1<button type="button" onclick="sendData({test:'ok'})">Click Me!</button>

1function sendData(data) {
2  var XHR = new XMLHttpRequest();
3  var urlEncodedData = "";
4  var urlEncodedDataPairs = [];
5  var name;
6
7  // Turn the data object into an array of URL-encoded key/value pairs.
8  for(name in data) {
9    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
10  }
11
12  // Combine the pairs into a single string and replace all %-encoded spaces to 
13  // the '+' character; matches the behaviour of browser form submissions.
14  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
15
16  // Define what happens on successful data submission
17  XHR.addEventListener('load', function(event) {
18    alert('Yeah! Data sent and response loaded.');
19  });
20
21  // Define what happens in case of error
22  XHR.addEventListener('error', function(event) {
23    alert('Oops! Something goes wrong.');
24  });
25
26  // Set up our request
27  XHR.open('POST', 'https://example.com/cors.php');
28
29  // Add the required HTTP header for form data POST requests
30  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
31
32  // Finally, send our data.
33  XHR.send(urlEncodedData);
34}

1<button type="button" onclick="sendData({test:'ok'})">Click Me!</button>

1function sendData(data) {
2  var XHR = new XMLHttpRequest();
3  var FD  = new FormData();
4
5  // Push our data into our FormData object
6  for(name in data) {
7    FD.append(name, data[name]);
8  }
9
10  // Define what happens on successful data submission
11  XHR.addEventListener('load', function(event) {
12    alert('Yeah! Data sent and response loaded.');
13  });
14
15  // Define what happens in case of error
16  XHR.addEventListener('error', function(event) {
17    alert('Oops! Something went wrong.');
18  });
19
20  // Set up our request
21  XHR.open('POST', 'https://example.com/cors.php');
22
23  // Send our FormData object; HTTP headers are set automatically
24  XHR.send(FD);
25}

1<form id="myForm">
2  <label for="myName">Send me your name:</label>
3  <input id="myName" name="name" value="John">
4  <input type="submit" value="Send Me!">
5</form>

1window.addEventListener("load", function () {
2  function sendData() {
3    var XHR = new XMLHttpRequest();
4
5    // Bind the FormData object and the form element
6    var FD = new FormData(form);
7
8    // Define what happens on successful data submission
9    XHR.addEventListener("load", function(event) {
10      alert(event.target.responseText);
11    });
12
13    // Define what happens in case of error
14    XHR.addEventListener("error", function(event) {
15      alert('Oops! Something went wrong.');
16    });
17
18    // Set up our request
19    XHR.open("POST", "https://example.com/cors.php");
20
21    // The data sent is what the user provided in the form
22    XHR.send(FD);
23  }
24 
25  // Access the form element...
26  var form = document.getElementById("myForm");
27
28  // ...and take over its submit event.
29  form.addEventListener("submit", function (event) {
30    event.preventDefault();
31
32    sendData();
33  });
34});

1<button onclick="sendData({test:'ok'})">Click Me!</button>

1// Create the iFrame used to send our data
2var iframe = document.createElement("iframe");
3iframe.name = "myTarget";
4
5// Next, attach the iFrame to the main document
6window.addEventListener("load", function () {
7  iframe.style.display = "none";
8  document.body.appendChild(iframe);
9});
10
11// This is the function used to actually send the data
12// It takes one parameter, which is an object populated with key/value pairs.
13function sendData(data) {
14  var name,
15      form = document.createElement("form"),
16      node = document.createElement("input");
17
18  // Define what happens when the response loads
19  iframe.addEventListener("load", function () {
20    alert("Yeah! Data sent.");
21  });
22    
23  form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
24  form.target = iframe.name;
25
26  for(name in data) {
27    node.name  = name;
28    node.value = data[name].toString();
29    form.appendChild(node.cloneNode());
30  }
31
32  // To be sent, the form needs to be attached to the main document.
33  form.style.display = "none";
34  document.body.appendChild(form);
35
36  form.submit();
37
38  // Once the form is sent, remove it.
39  document.body.removeChild(form);
40}
41Here's the live result:

1<form id="myForm">
2  <p>
3    <label for="i1">text data:</label>
4    <input id="i1" name="myText" value="Some text data">
5  </p>
6  <p>
7    <label for="i2">file data:</label>
8    <input id="i2" name="myFile" type="file">
9  </p>
10  <button>Send Me!</button>
11</form>

1// Because we want to access DOM node,
2// we initialize our script at page load.
3window.addEventListener('load', function () {
4
5  // These variables are used to store the form data
6  var text = document.getElementById("i1");
7  var file = {
8        dom    : document.getElementById("i2"),
9        binary : null
10      };
11 
12  // Use the FileReader API to access file content
13  var reader = new FileReader();
14
15  // Because FileReader is asynchronous, store its
16  // result when it finishes to read the file
17  reader.addEventListener("load", function () {
18    file.binary = reader.result;
19  });
20
21  // At page load, if a file is already selected, read it.
22  if(file.dom.files[0]) {
23    reader.readAsBinaryString(file.dom.files[0]);
24  }
25
26  // If not, read the file once the user selects it.
27  file.dom.addEventListener("change", function () {
28    if(reader.readyState === FileReader.LOADING) {
29      reader.abort();
30    }
31    
32    reader.readAsBinaryString(file.dom.files[0]);
33  });
34
35  // sendData is our main function
36  function sendData() {
37    // If there is a selected file, wait it is read
38    // If there is not, delay the execution of the function
39    if(!file.binary && file.dom.files.length > 0) {
40      setTimeout(sendData, 10);
41      return;
42    }
43
44    // To construct our multipart form data request,
45    // We need an XMLHttpRequest instance
46    var XHR = new XMLHttpRequest();
47
48    // We need a separator to define each part of the request
49    var boundary = "blob";
50
51    // Store our body request in a string.
52    var data = "";
53
54    // So, if the user has selected a file
55    if (file.dom.files[0]) {
56      // Start a new part in our body's request
57      data += "--" + boundary + "\r\n";
58
59      // Describe it as form data
60      data += 'content-disposition: form-data; '
61      // Define the name of the form data
62            + 'name="'         + file.dom.name          + '"; '
63      // Provide the real name of the file
64            + 'filename="'     + file.dom.files[0].name + '"\r\n';
65      // And the MIME type of the file
66      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';
67
68      // There's a blank line between the metadata and the data
69      data += '\r\n';
70      
71      // Append the binary data to our body's request
72      data += file.binary + '\r\n';
73    }
74
75    // Text data is simpler
76    // Start a new part in our body's request
77    data += "--" + boundary + "\r\n";
78
79    // Say it's form data, and name it
80    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
81    // There's a blank line between the metadata and the data
82    data += '\r\n';
83
84    // Append the text data to our body's request
85    data += text.value + "\r\n";
86
87    // Once we are done, "close" the body's request
88    data += "--" + boundary + "--";
89
90    // Define what happens on successful data submission
91    XHR.addEventListener('load', function(event) {
92      alert('Yeah! Data sent and response loaded.');
93    });
94
95    // Define what happens in case of error
96    XHR.addEventListener('error', function(event) {
97      alert('Oops! Something went wrong.');
98    });
99
100    // Set up our request
101    XHR.open('POST', 'https://example.com/cors.php');
102
103    // Add the required HTTP header to handle a multipart form data POST request
104    XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);
105
106    // And finally, send our data.
107    XHR.send(data);
108  }
109
110  // Access our form...
111  var form = document.getElementById("myForm");
112
113  // ...to take over the submit event
114  form.addEventListener('submit', function (event) {
115    event.preventDefault();
116    sendData();
117  });
118});