AJAX form encountered a bad request error with code 400

JavaScript Issue:

function submitForm(){
var data = {
    name: _("#name").value,
    email: _("#email").value,
    message: _("#message").value
}
var output = JSON.stringify(data);
var ajax = new XMLHttpRequest();
    ajax.open( "POST", "/src/scripts/parser.php" );
    ajax.setRequestHeader("Content-Type", "application/json'");
    ajax.onreadystatechange = function() {
        if(ajax.readyState == 4 && ajax.status == 200) {
            console.log('success')
        } else {
            console.log('fail')
        }

    }
    ajax.send( output );
console.log(output)

}

Encountering Error When Submitting Form:

400 Bad Request Your browser sent a request that this server could not understand.

Seeking Assistance with Fixing This Issue. Thanks in advance :)

Answer №1

The crucial point to note here is the phrase: 'that this server could not comprehend'. This typically suggests that there is an issue on the server. However, it is also possible that your URL is incorrect. Possibly...

  1. parser.php is missing
  2. parser.php is located in a different directory (not 'src/scripts')
  3. There is a server-side URL rewriting module that conceals the true path of parser.php
  4. parser.php is generating a 400 error

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

Is it possible to add a new item to the Vuex store before making an AJAX call in Vue.js?

I currently have a situation where I am managing a list of tasks in vuex. I have a button within a component that allows users to add a task, which is then stored in a backend server. Here's how it currently works: Button->Ajax->Backend Respons ...

Issues encountered during the deployment process on Vercel

I've encountered an issue while deploying my Next.js app on Vercel. It seems to be related to an unsupported platform error. I have attached an image displaying the exact error message. npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform f ...

Issue with Material UI Textfield functionality on mobile Safari browser

UPDATE: Resolved the problem by including this code in index.css input { -webkit-user-select:text;} In my application, I am using a Material UI box that contains text fields with an onChange handler. While the TextFields function correctly on most bro ...

Unable to display values in Fusion Charts zoomline chart using the showValues chart property

I'm struggling to figure out how to display the data plot values with showValues: '1' in a zoomline chart using Fusion Charts. You can see and test it on this fiddle: http://jsfiddle.net/60oeahc1/4/ Is there a way to make this feature work ...

Why is it important to use linting for JavaScript and TypeScript applications?

Despite searching extensively on Stack Overflow, I have yet to find a comprehensive answer regarding the benefits of linting applications in Typescript and Javascript. Any insights or resources would be greatly appreciated. Linting has become second natur ...

Automate logging in and out of Gmail chat by programmatically simulating clicks on the span elements that represent the chat status in Gmail

When I'm at work, I prefer using Gmail's encrypted chat feature because it logs chats without saving anything to the hard drive. However, when I'm at home, I switch to Pidgin as logging into Gmail chat at home can lead to messages ending up ...

Manipulating float values in jQuery is similar to formatting numbers in PHP with the number_format() function

I am looking for a way to output floating numbers in JavaScript that functions exactly like the number_format function in PHP. Sample Javascript Code Math.round(totalCredit).toFixed(2) Sample PHP Code echo number_format(22212 , 2); The code above re ...

Reorganize array elements in a different sequence utilizing JavaScript

I possess an array const arr = [ {label: 'a', width: 200}, {label: 'b', width: 200}, {label: 'c', width: 200}, {label: 'd', width: 200}, {label: 'e', width: 200} ]; provided with another arr ...

Developing a ReSTful API to deliver data for an asynchronous Ajax call

Issue Recap I seem to be missing a key piece of the puzzle here, so please bear with me as I try to explain. Initially, I set up a minimal API for managing the cart functionality of an online store. For a better understanding, refer to Snippet A below. ...

Partial View fails to render on the webpage

After submitting information from my first partial view, I attempted to load a second partial view. However, upon submission, the first partial view just refreshes and remains on the same page instead of loading the new view. Despite setting up my controll ...

Create an animation where an element glides smoothly over the others, extending to a specific width

How can I make a table of headings stretch to the width of the table and then slide down over the others when one of the headings is clicked? I want the heading to return to its original state when clicked again or when another heading is clicked. Here&ap ...

Utilizing Vue.js and Webpack to Handle Requests for Multiple Incorrect Resource Links

After utilizing Vue.js single file components to construct a website and appreciating the modular approach, I've encountered an issue. The browser appears to be requesting multiple versions of resources instead of just one URL for each. HeaderBar.vue ...

Subpar resolution of PNG images displayed in HTML canvas

My attempt to draw a PNG image onto the canvas is resulting in poor quality. I am using the drawImage method as shown below: src = folder+self.cur+".png"; imageObj.src = src; imageObj.onload = function() { context.clearRect(0, 0, cv, ch), context.drawImag ...

Loading millions of markers through clustering using Ajax

I am currently facing an issue with my website where 1 million markers are loading when the page loads, causing the page to be very heavy and take a long time to load. I want to optimize this process by loading the listings based on ajax when clicking on a ...

Mastering the art of utilizing $filter alongside select in angular.js

Is there a way to switch between different filters based on the user's selected values? I have three filters ('largeNumber', 'Percentage', 'Bytes') and I want to toggle between these filters based on the selection made by ...

Combine filter browsing with pagination functionality

I came across a pagination and filter search online that both function well independently. However, I am looking to merge them together. My goal is to have the pagination display as << [1][2] >> upon page load, and then adjust to <<[1]> ...

An async function cannot be used as a Constructor

I am in the process of creating a constructor function using JavaScript. This constructor needs to be asynchronous because I am utilizing the Phantom JS module for data scraping. As a result, an asynchronous function must be used to scrape data through Pha ...

What is the best way to reset the selected option in Vue.js when clicking on a (x) button?

Is there a way to create a function or button specifically for clearing select option fields? I attempted using <input type="reset" value="x" /> However, when I clear one field, all fields end up getting cleared. Should I provide my code that incl ...

A guide to testing window.pageYoffset in webdriverIO using chai assertions

When conducting a selenium test using WebDriverIO and Chai, I encountered the need to capture the position of window.pageYoffset. Unfortunately, I was unable to find a direct way to do this in WebDriverIO. My initial attempts involved: browser.scroll(0, 2 ...

The tag's onclick function that was dynamically created was not triggering in jQuery

I created a web application using jquery mobile and ran into an issue. I am trying to call a function by clicking on a dynamically generated anchor tag, but it's not working and showing an error that the function is not defined. Any assistance on this ...