The issue of unreadable URLs on the server side caused by a Javascript Ajax problem

I have successfully implemented code to send information from a website to a server. The code I used is as follows:

<!DOCTYPE html>
<html>
<script>
var Network = {"name":"", "password":""}
var json;
var xhr = new XMLHttpRequest();
var Json = JSON.stringify(Network)

function Info(sp) {
let svar = prompt(sp, "Enter information here");
return svar
}

Network.name = Info("Enter internet name");
Network.password = Info("Enter internet password");

console.log(Network);

xhr.open("GET", "/network?Json="+Json+"}", true);
xhr.send();
</script>
</html>

Although this code is functional, I am encountering an issue that I am unsure whether is a bug or error. When trying to deserialize the Json object on my esp8266 using the ArduinoJson library, I receive an error message stating "IncompleteInput." Upon inspecting the AJAX request here, it is evident that there is a missing end bracket in the text, which I suspect is causing the error. Manually typing in the missing character resolves the issue. How can I correct this problem?

Answer №1

The solution to my issue was discovered within the HTML page shared in my post. User romkey advised me to parse the string outside of the function where I was opening the XML object, and this solution worked immediately. The following code successfully resolved the problem:

<!--Here, the type of document is defined-->
<!DOCTYPE html>
<html>
<script>
//variables are defined here
var Network = {"name":"", "password":""}
var xhr = new XMLHttpRequest();
var Json;
var url;

//function to create pop-up boxes
function Info(sp) {
  let response = prompt(sp, "enter information here");
  return response;
}

//copying data from pop-up boxes to JavaScript object
Network.name = Info("Enter internet name");
Network.password = Info("Enter internet password");

//logging the object in the console
console.log(Network);

//converting Network object to JSON (JavaScript Object Notation)
Json = JSON.stringify(Network);

url = "/network?Json="+Json;

//sending the network name and password to the ESP
 xhr.open("GET", url, true);
 xhr.send();
</script>
</html>

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

Display or conceal the nearest element that was clicked

http://jsfiddle.net/KevinOrin/xycCx/1/ jQuery('.happening-main-text .readmore').click(function() { jQuery('.divmore').toggle('slow'); return false; }); ...

Displaying a JQuery notification when hovering over a link

I am having trouble getting an alert to pop up when I hover over a hyperlink using JQuery and Javascript. The hyperlink is inside an anchor within the main section of the HTML. Any assistance would be much appreciated. Here is my current code snippet: &l ...

Can someone provide guidance on creating a JavaScript function that locates an image within an <li> element and sets that image as the background-image property in the li's CSS?

Let's dive deeper into this concept: <li class="whatever"> <img src="/images/clients/something.jpg"> </li> <li class="whatever"> <img src="/images/clients/whatever.png"> </li> He ...

Implementing PrimeFaces Template with AJAX Status Updates

Looking to implement a PrimeFaces template with global AJAX status? Check out the progress made so far. In the file template/default.xhtml (Facelets Template), the code includes: <!-- Code snippet here --> The login page, login.xhtml (Facelets Tem ...

JSON data localization

I am currently in the process of developing a hybrid mobile application with PhoneGap as the platform. My goal is to localize the app's data so that it can be accessed offline. Essentially, I want all JSON data received from the API to be stored local ...

Adjusting Chrome Zoom to 100% with Selenium in C#

I've been trying to use this code in Selenium with C# to adjust the zoom level of the Chrome browser to 100% using JavaScript. However, it doesn't seem to be working as expected. Can someone please assist me with this issue? var js = ((IJavaScri ...

What is the best way to restrict the maximum number of items stored in local storage?

I'm creating a GitHub search app using the GitHub API in Angular. I want to restrict the number of items that can be stored in local storage. If the number of stored elements exceeds 5, the "Add to Favorite" button should either stop working or disapp ...

Retrieving a numeric attribute from a JSON structure

Recently, I encountered an issue with a PHP multidimensional array that I converted to JSON using JSON_encode(). Since I am working with Drupal, the arrays often contain keys that look like this: $some_array['und']['0']['value&a ...

Resolving unexpected behavior with res.locals and pug integration

I have a function in my app.js that allows the user-id to be accessible in pug templates. app.use(function (req, res, next) { res.locals.currentUser = req.session.userId; next(); }); When logged in, I can access the id. However, when not logged in, t ...

Establish a jQuery cookie to store language preferences

On the website I oversee, I want to implement a way to set a cookie for the selected language. The only information available is that users choose their preferred language by clicking on a dropdown menu with distinct classes assigned to each language - on ...

Having trouble processing a JSON object using Jquery?

Hello, I am currently working on parsing a JSON object using jQuery. So far, I have successfully extracted all the necessary information from the results except for one crucial piece - the performance tags. Each JSON result is enclosed in an event tag and ...

Utilizing Python, Javascript, and AJAX to enhance the live search functionality

I am currently working on developing an AJAX live search feature using Python. Being new to AJAX, I have been learning from various tutorials and documentation to make progress. While searching, I came across an example at http://www.w3schools.com/ajax/aja ...

Tips for transferring data to the next page with JavaScript AJAX

I am working on a webpage that includes an html select element <pre> $query = mysql_query("select * from results"); echo "<select id='date' onchange='showdata()' class='form-control'>"; while ($arr = mysql_fetch_a ...

Comparing Angular6, ReactJS, and VueJS: Which JavaScript framework

As I embark on my journey into the world of technology, I am seeking recommendations on where to begin. I am a newbie in this realm and would greatly value your bold suggestions. I am particularly interested in starting with Nodejs as a back-end technolo ...

What is the best way to place text beneath an input field?

Although it may seem simple, I am new to this and could use some help. I have an input box: <input type="text" name="username" id="username" class="form-control" value="{{username}}"> <div class="error" id="nameErr"></div> I have a func ...

The jQuery form submission functionality fails to execute properly in the presence of a callback function

I have been on the hunt for a solution to this problem, but unfortunately I haven't been able to find one. The issue at hand is that when using the jQuery Submit function with a button and a callback function defined, it doesn't seem to work. Her ...

What are some solutions to troubleshoot the baseurl bug in Axios for a Node.js application?

An application was developed for a specific device using Vue.js on the front end and Express.js on the back end. The Axios library was utilized to fetch data from an API. However, when attempting to localize the base URL in Axios, connecting to the site t ...

The Ajax request returned a status of 200, yet an error message was displayed

Even though the status is 200, why does it print the error message inside alert("error...");? function makeSelect() { var blouseoption = document.querySelector('input[name="blouseoption"]:checked').value; var url = "http://dukano.co/sakh ...

ReactPlayer allows for the simultaneous playback of two files

I am trying to simultaneously play two files in reactjs using ReactPlayer. The first file is a video music clip that includes human voice audio, while the second file is music only without the human voice. My issue is that when I run the code provided, ei ...

Any suggestions on how to incorporate the variable into the inline JavaScript [[]] API path?

I have a query regarding creating a URL in JavaScript, but I'm unsure how to include variables within th:inline="javascript". Below is my code snippet: <script th:inline="javascript"> $(function() { $('#querySubmit').click(queryS ...