An old-school Ajax request abruptly interrupted halfway through

    function submitLogin(){
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        var testlabel = document.getElementById('testlabel').value;
        var postStr = "username=" + username + "&password=" + password + "&testlabel=" + testlabel;

        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById('mainPage').innerHTML = xmlhttp.responseText;//ATTENTION1
            } else {
                document.getElementById('mainPage').innerHTML = "Logining......";//ATTENTION2
            }
        }
        xmlhttp.open("POST", "loginto.php", true);
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlhttp.send(postStr);

}

This is a code snippet I've written. I noticed that changing the 'mainPage' variable in //ATTENTION1 causes no issues with the post method, as the response content can be displayed correctly.

However, when I change the 'mainPage' variable in //ATTENTION2 to something else, the page automatically sends a "GET" request. But if I keep 'mainPage' there, everything works fine.

If anyone has a solution to this dilemma, I would greatly appreciate it. Thank you!

Answer №1

What exactly is the definition of "something else"? An id for an element on your webpage is required in order for the content received from the ajax response to be displayed.

For instance, if you have a

<div id="myID"></div>

located somewhere on the page, and you switch 'mainPage' in //ATTENTION1 with 'myID', then the content retrieved from the ajax request will be inserted into that particular div.

The modification made in //ATTENTION2 is intended for transitional phases since it falls under "else", thus it will not affect the outcome once the ajax request is finished.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Does the ANTS Performance Profile have the capability to monitor AJAX requests within a web application?

In the web application I'm working on, I make use of jQuery to handle basic AJAX requests. I am curious to know if ANTS Performance Profiler has the capability to monitor and display results for these AJAX calls similar to how it would for a regular m ...

Executing the AngularJS nested controller only once

I am still new to Angularjs and just started working on an app that has several "projects" each with a local menu displayed on specific pages. The main navbar with footer is located in the Index.html: <body ng-app="ysi-app" ng-controller="MainControlle ...

JSLint error: Inconsistent use of spaces and tabs detected

I recently ran the code below through JSLint: $(document).ready(function() { /* Insert paragraph upon page load */ // Retrieve all header elements var header = document.getElementsByTagName('h1'), parent, ...

Tips for effectively combining the map and find functions in Typescript

I am attempting to generate an array of strings with a length greater than zero. let sampleArray2:string[] = ["hello","world","angular","typescript"]; let subArray:string[] = sampleArray2 .map(() => sampleArray2 .find(val => val.length & ...

Oops, it seems like there is a TypeError with the function window.initMap in Google Maps

For the past week, I have been struggling to update my marks on Google Maps while using AJAX in an HTML page. My controller fetches data from the database and sends it back, but now I am encountering the following error: TypeError: window.initMap is not a ...

Passing data from client to express.js using Javascript

I'm having trouble sending a variable from a JavaScript application to a Node.js server. Here's the code snippet: //client side $.get('http://smart-shopper.ro/messages?from=lastGeneralTimeStamp', datas => { console.log("dat ...

Tips for troubleshooting objects within an Angular template in an HTML file

When I'm creating a template, I embed some Angular code within my HTML elements: <button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon" ng-if="(!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'curren ...

Collaborating on user authorization within a MEAN.JS framework

Recently, I decided to dive into the world of web application development by using MEAN.js full stack solution. Using the generators within MEAN.js, I was able to effortlessly create multiple CRUD models along with all the necessary express routes. In ad ...

How can I retrieve information from an HTML or JavaScript object?

Imagine a scenario where you have an HTML table consisting of 5,000 rows and 50 columns, all generated from a JavaScript object. Now, suppose you want to send 50 checked rows (checkbox) from the client to the server using HTTP in JSON format. The question ...

Unable to show information within a view in an Express Node.js application

Just diving into the world of express and node, I'm currently working on a basic express app that retrieves data from a json file. However, when I try to render the data on my post/details view, it doesn't seem to show up. I suspect the issue lie ...

The PhantomJs browser is not able to open my application URL

Recently, my scripts in PhantomJS browser have stopped running. Whenever I try to capture screens, all I get are black screens. To troubleshoot this, I manually opened a URL in PhantomJS using the command window and ran the script below to verify if it ope ...

When using JSON stringify, double quotes are automatically added around any float type data

When passing a float data from my controller to a JavaScript function using JSON, I encountered an issue with quotes appearing around the figure in the output. Here is the JS function: function fetchbal(){ $.ajax({ url: "/count/ew", dataType: "jso ...

What is the best way to use appendChild within an AJAX get function to manipulate the DOM

I've been working on a code function where I try to append a list item (li) into the HTML received in 'msg', but it's not functioning properly. Any ideas why? function handleFileSelect(evt) { var files = evt.target.files; $(&ap ...

The communication feature using jQuery and PHP is not saving information to the database

I'm currently in the process of setting up a chat page using jQuery and PHP. However, I've encountered an issue where although the Added echo statement appears after submitting data on my simple form, the information is not actually being added t ...

Accessing a remote server is blocked in Phonegap Android Release builds

Having trouble with ajax requests in a Phonegap release build. Device: Samsung Galaxy S4 Issue: When using the Phonegap app and 'phonegap serve': Successful method: Posting data to server using form with hidden iframe as target and action poi ...

Guide on how to have controller wait for promise to be resolved by an Angular service

Currently, I have a service that initiates an AJAX request to the backend. Service: function RetrieveCompanyDataService(options) { this.url = '/company'; this.Companies = undefined; this.CompaniesPromise = ...

What could be causing NestJS/TypeORM to remove the attribute passed in during save operation?

Embarking on my Nest JS journey, I set up my first project to familiarize myself with it. Despite successfully working with the Organization entity, I encountered a roadblock when trying to create a User - organizationId IS NULL and cannot be saved. Here ...

Why am I receiving a null response from my ajax request?

I have a working ajax call to fetch XML data from my REST API. However, when I try to echo the results, JQuery returns null. If I use var_dump on the results instead, JQuery accepts the information but it's not formatted correctly and causes errors. ...

AJAX Script - Resembling the Organization of Wordpress Widgets

After completing my own CMS, I am now looking to implement an AJAX script that can arrange elements on the website. Specifically, I am in need of something similar to the widget arrangement feature in Wordpress sidebars. Is there anyone who could guide me ...

Having trouble sending a request in next.js with Docker during the build process?

When utilizing the getStaticProps function to send a request to my backend API from another Docker container, I am encountering an issue. Despite ensuring that the API URL is accurate, the static page fails to be created. This is due to the requirement for ...