Performing an Ajax POST request using jQuery

I am currently working on modifying my code to use POST instead of GET to send variables to a PHP page. The current code sends data via GET and receives it in JSON format. What changes should I make in order to pass the variables to process_parts.php using POST?

function imagething(){
    var done = false,
    offset = 0,
    limit = 20;
    if(!done) {
        var url = "process_parts.php";

        $.ajax({
            type: "POST",
            data: {offset: offset, limit: limit},
            url: url
        }).done(function(response) {

            if (response.processed !== limit) {
                // asked to process 20, only processed <=19 - there aren't any more
                done = true;
            }
            offset += response.processed;
            $("#mybox").html("<span class=\"color_blue\">Processed a total of " + offset + " parts.</span>");
            alert(response.table_row);
            console.log(response);
            imagething(); //<--------------------------recursive call
        }).fail(function(jqXHR, textStatus) {

            $("#mybox").html("Error after processing " + offset + " parts. Error: " + textStatus);

            done = true;
        });
    }
}
imagething();

Answer №1

To modify the default method from GET, simply adjust the type parameter in your request. You also have the option to pass your querystring properties as an object instead of exposing them immediately in the URL:

var endpoint = "process_parts.php";

$.ajax({
    url: endpoint,
    type: 'POST',
    data: {
        offset: offset,
        limit: limit
    } 
}).done(function() {
    // continue with the rest of your script...
});

Answer №2

Give this a shot!


$.ajax({
    url: "URL",
    type: "POST",
    contentType: "application/json;charset=utf-8",
    data: JSON.stringify(ty),
    dataType: "json",
    success: function (response) {
        alert(response);
    },

    error: function (x, e) {
        alert('Failed');
        alert(x.responseText);
        alert(x.status);
    }
});

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

A server-side rendered page in Next.js that functions without the need

Hey everyone, I'm curious about the best way to serve an HTML page in a Next Js application without relying on additional JavaScript. I need this because I want to make sure my webpage can be accessed by users who have older phones like Symbian or oth ...

invoking a function in javascript from react

Currently, I am grappling with the task of invoking a JavaScript function from within React while adapting a "React" based "Menu" onto some existing jQuery functions. Below you can find my code for the menu: class Menus extends React.Component{ co ...

Firebase Firestore replicates documents, subcollections, and data

Here is a sample structure: .doc Name .colection 1 .doc sub_doc .collection sub_col1 .doc sub_doc .collection 2 .doc sub_doc I want to duplicate this document, including all its sub-collections, to create an ex ...

I'm intrigued: what type of syntax is Facebook's polling service utilizing in the callback?

While monitoring the Network Monitor on Chrome's developer tool, I observed how Facebook updates content on their news feed. All AJAX responses start with the following: for (;;);{"__ar":1,"payload":[]} I'm curious about what the for(;;); piec ...

Encountering a bug: "Undefined property" issue when working with Web Sockets in React Native

I'm a beginner in React Native and Java Script development, and I'm facing an issue while trying to retrieve a JSON object and display it on the client side. I keep getting a "cannot read property of undefined" error when using websockets instead ...

What are the steps to designing your own unique custom button with Material-UI?

While Material-UI allows you to utilize withStyles() for creating a Button with a predefined set of styles, I am curious if it is achievable to achieve the same result using props instead. This would ensure that all custom buttons I create automatically ha ...

Do not use Express.js to serve the index.html file

Encountered an issue when attempting to run my Express.js solution. Instead of opening my desired index.html file located in the client directory, it kept opening the index.jade file from the views folder with the message "Welcome to Express" on the browse ...

A guide on accessing a dynamic object key in array.map()

How can I dynamically return an object key in array.map()? Currently, I am retrieving the maximum value from an array using a specific object key with the following code: Math.max.apply(Math, class.map(function (o) { return o.Students; })); In this code ...

Exploring the depths of nested image objects using the map method in ReactJS

I successfully mapped through and destructured this object, but I'm struggling to access the image within the same map. I believe I may need to map through it separately, but I'm uncertain. Here is the object: { "attributes": { ...

Generate a random 8-digit number with a specific range in JavaScript

I want to generate a random 8-digit number ranging from 0 to 7, excluding the numbers 8 and 9. Here is what I have tried so far, but I'm unable to exclude the numbers 8 and 9: var b = Math.floor(Math.random()*90000000) + 10000000; console.log(b) Is ...

Tips for real-time editing a class or functional component in Storybook

Hey there, I am currently utilizing the storybook/react library to generate stories of my components. Everything has been going smoothly so far. I have followed the guide on https://www.learnstorybook.com/react/en/get-started and added stories on the left ...

A comprehensive guide on organizing JavaScript files within an Angular project

In the process of building my MEAN app, I have structured my folders in the following way: I have included a js file in /angular/src/assets/js for jQuery functionalities. To achieve this, I utilized npm to install jQuery. Now, I am faced with the task o ...

Enhance Your Text Areas with Vue.js Filtering

Currently, I am working with a textarea that has v-model: <textarea v-model="text"></textarea> I am wondering how to filter this textarea in Vue. My goal is to prevent the inclusion of these HTML quotes: &amp;amp;#039;id&amp;amp;#039 ...

Bootstrap button groups do not support the checking functionality of radio buttons

My bootstrap modal contains a form with two radio style buttons created using the example for normal button styled radio options found here: <form id="changePlanForm" action="/change_plan_submit.php" method="post"> & ...

Utilizing Material UI Pickers and Formik to efficiently handle Date, Time, and Second components

Currently, I am developing a React application with Formik that requires the utilization of date and time pickers. The app is being constructed using Material-UI and I have been exploring the possibilities provided by Material-UI Pickers at Given my relat ...

Assign a unique variable to each div simultaneously

I am looking to implement a countdown feature for each DIV with the class (.topitembox) by incorporating specific JSON variables. $('#countdown_items .topitembox').each(function () { itmID = $(this).attr('class').replace(/[^0-9]/g, ...

The use of "Undefined in res.redirect" is a common issue that may arise when working with a combination of libraries such as

Encountering an issue while trying to redirect the user to a signature route with the file name as a URL argument, and receiving undefined... Example of a file as a URL argument after upload: http://localhost:3000/undefined?arquivo-assinado=82a35943-5796 ...

Get rid of the arrow that is displayed when using the `time` input type in HTML5

Recently, I encountered an issue with the default HTML5 code snippet. My custom background looked perfect except for a pesky black arrow appearing on the right side. In this image, you can see the problematic black arrow that needs to be removed. I attemp ...

Parsing JSON sub items in Android application using Java

Here is a snippet of my PHP file: <?php $myObj = array( "name"=>"John" , "age"=>"30" , "post"=>[ "title"=>"What is WordPress" , "excerpt"=>"WordPress is a popular blogging platform" , ...

Tips for retrieving next-auth authOptions from an asynchronous function

I need to retrieve values from AWS Secrets Manager and integrate them into the authOptions configuration for next-auth. The code implementation I have is as follows: export const buildAuthOptions = async () => { const secrets: AuthSecrets = await getS ...