form.html
1.27 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>email form</title>
</head>
<body>
<form action="/email/form" method="post">
email : <input type="text" name="email"><br/>
<input type="submit">
</form>
<button class="ajaxsend">ajaxsend</button>
<div class="result"></div>
<script>
document.querySelector('.ajaxsend').addEventListener('click', function () {
var inputdata = document.forms[0].elements[0].value
sendAjax('http://127.0.0.1:3000/email/ajax', inputdata)
})
function sendAjax(url, data) {
var data = {'email': data};
data = JSON.stringify(data);
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', "application/json");
xhr.send(data);
xhr.addEventListener('load', function () {
console.log(xhr.responseText);
var result = JSON.parse(xhr.responseText);
var resultDiv = document.querySelector(".result");
if(result.result !== "ok")
resultDiv.innerHTML = "your email is not found";
else
resultDiv.innerHTML = result.name;
//document.querySelector(".result").innerHTML = result.name;
})
}
</script>
</body>
</html>