Post Form data to REST API using JavaScript

<html>
<head>
    <title></title>
</head>
<body>
    <h2>Main Test Page</h2>
    Username <input type="text" name="txt1" id="txt1">
    Password <input type="text" name="txt2" id="txt2">
    <button onclick="callapi()">Call Api</button>
    <button onclick="PostData()">Post Data</button>
    <span id="result"></span>
    <script>
        function callapi() {
            // Ajax
            var req = new XMLHttpRequest();
            req.open("GET", "http://apitest.cegrajasthan.in/api/infoes/Getinfoes");
            req.send();
            var data = "";
            req.onreadystatechange = function () {
                if (req.readyState == 4) {
                    //document.getElementById('result').innerText = req.responseText;
                    var a = JSON.parse(req.responseText);
                    //alert(a[1]);
                    data = "<ul>";
                    for (var i = 0; i < a.length; i++) {
                        data+="<li>"+a[i].name+" "+a[i].fname+" "+a[i].id+"</li>";
                    }
                    
                data+="</ul>";
                }
                document.getElementById('result').innerHTML = data;
            }
        }
        function PostData() {
            // Ajax
            var req = new XMLHttpRequest();
            const params = {
            name: document.querySelector('#txt1').value,
            fname: document.querySelector('#txt2').value
        }
           
            req.open("POST", "http://apitest.cegrajasthan.in/api/infoes/Postinfo");
            req.setRequestHeader('Content-type', 'application/json')
        req.send(JSON.stringify(params)) 
            req.onreadystatechange = function () {
                if (req.readyState == 4) {
                    document.getElementById('result').innerText = req.responseText;
                }
            }
        }

    </script>
</body>
</html>
Submit a Comment Cancel reply
