Receiving Ajax Callback: extracting messages from PHP using JSON, then displaying them in a DIV element using JavaScript

Question

Receiving Ajax Callback: extracting messages from PHP using JSON, then displaying them in a DIV element using JavaScript

As a complete beginner, I find JavaScript to be quite challenging and struggle with simple tasks.

I have a PHP script that retrieves data from a website using JS. This PHP script updates the database and returns a success message using the following code:

echo json_encode(array('success'=>'true'));

I've created a function that triggers actions when the "success" message is returned:

success: function(){
  ....
}

Now I want to enhance it further. My PHP script will also return a message that should be displayed in a specific DIV.

The message could be something like:

"error-msg"=>"Could not write to DB." or "success-msg"=>"Data successfully saved in DB."

I'm unsure how to determine if the returned data is an "error-msg" or "success-msg." I don't know how to extract the message string and display it in the designated DIV.

Can anyone provide guidance on this issue?

Thank you!

javascript json ajax

Answer 1

Answer №1

Instead of opting for success_msg and error_msg, consider utilizing status_msg and status (within your PHP script).

status_msg will hold the text. status will carry "success" or "error". Alternatively, you can use any other marker you prefer.

To verify the message status in Javascript,

var response = JSON.parse(data);
console.log(response.status_msg); //show the message    
if(response.status == "success"){    
    //perform an action    
}    
else {    
    //perform another action    
}

Once the message is received, you can present it within a DIV using

document.getElementById("message").innerHTML = response.status_msg;

The structure of the HTML file would be as follows

<div id="message">
</div>

Answer 2

Instead of opting for success_msg and error_msg, consider utilizing status_msg and status (within your PHP script).

status_msg will hold the text. status will carry "success" or "error". Alternatively, you can use any other marker you prefer.

To verify the message status in Javascript,

var response = JSON.parse(data);
console.log(response.status_msg); //show the message    
if(response.status == "success"){    
    //perform an action    
}    
else {    
    //perform another action    
}

Once the message is received, you can present it within a DIV using

document.getElementById("message").innerHTML = response.status_msg;

The structure of the HTML file would be as follows

<div id="message">
</div>

Receiving Ajax Callback: extracting messages from PHP using JSON, then displaying them in a DIV element using JavaScript

Answer №1

Similar questions

"Master the art of drag and drop in Dojo: Implementing a handler for the drop

I encountered a parsing issue while trying to compile my Vue project

What is the difference in memory usage for JavaScript objects between Node.js and Chrome?

Guide to crafting a custom asynchronous function in a separate file using Express JS

Python Eve encountering WSGI issue [Errno 32] causing a broken pipe during an Ajax call

Creating an API using a JSON file in Node.js

Tips for utilizing document.write() with a document rather than just plain text

Tips on moving information from one form to another after referencing the original page using Javascript and HTML

What is the proper way to use AJAX for sending data through a POST request?

The Ajax Success Function Failing to Execute as Expected

Troubleshooting an issue with window.close in AngularJS

Steps to invoke a function repeatedly for an animation

The Kendo UI grid encounters issues with pagination functionality after new data is inserted

Ensure that the date range picker consistently shows dates in a sequential order

PHP, having difficulty assigning value to variable using $_POST

Changing the position of x-axis labels in a Google Bar Chart to the top

Getting Errors When Retrieving Data with Apostrophe Symbol ' in Node.js

The advantages and disadvantages of utilizing various methods to visually enhance HTML elements with JavaScript

Incorporating a TypeScript module into a JavaScript module within a React application

Fixing the error "require() is not defined" when trying to call a function from JavaScript to Node.js