0

$ajax server response:

{"username":"","password":""}

fetch server response:

{"{\"username\":\"\",\"password\":\"\"}":""}

Why aren't they the same? I need the same server response. I'm using PHP+Apache

Here is my code:

import $ from 'jquery';

export function FetchData(type, data){

const serverUrl = 'http://localhost/oms/'+ type + ".php";

return new Promise((resolve, reject) => {

    $.ajax({
        type: 'POST',
        url: serverUrl,
            data //body : {username: "username", password:"password"}
         })
        .done(function(res) {
            //console.log(res);
            resolve (res);
        })
        .fail(function(jqXHR, exception){
            //alert('server error()');
            reject(jqXHR);
        });

    fetch(serverUrl,{
        method: 'POST',
        headers: {
            Accept: '*/*',
            'Content-Type': 'application/x-www-form-urlencoded',
            //'Access-Control-Allow-Origin': '*',
            //'Access-Control-Allow-Methods': 'POST,GET,OPTIONS,PUT,DELETE',
            //'Access-Control-Allow-Headers': 'Content-Type,Accept',
        },
        body: JSON.stringify(data)
        //body : {username: data.username, password: data.password}
    })
    .then((response) => response.json())
    .then((responseJson) => {
        resolve(responseJson);
    })
    .catch((error) => {
       reject(error);
    });
});
}
Cave Johnson
  • 6,499
  • 5
  • 38
  • 57
Indranil Talukdar
  • 21
  • 7

2 Answers2

0

The responses are essentially the same just that response from fetch library returns a Stringified JSON. You need to convert it into actual JS object.

const responseData = JSON.parse(response.json())

Chromonav
  • 773
  • 5
  • 11
0

This occurs because you're sending the content type application/x-www-form-urlencoded with JSON data you need to change it to application/json like

export const FetchData = (type, data) => {
    let serverUrl = 'http://localhost/oms/'+ type + ".php";
    let data = {
        username: data.username,
        password: data.password
    };

    return new Promise((resolve, reject) => {
        fetch(serverUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
            credentials: 'include',
            body: JSON.stringify(data),
        })
            .then((response) => response.json())
            .then((responseJson) => {
                resolve(responseJson)
            })
            .catch((error) => {
                reject(error)
            })

    })
};

I added credentials it's read-only property of the Request interface indicates whether the user agent should send cookies from the other domain in the case of cross-origin requests. This is similar to XHR’s withCredentials flag

If you want to use something smaller to jQuery you can use Axios It's XMLHttpRequests

If you get some CORS issues this will help you

Liam
  • 6,517
  • 7
  • 25
  • 47
  • Thanks @Liam for answering...I've tried...but i'm getting [ ] server reply now...please help.. – Indranil Talukdar Mar 10 '18 at 08:04
  • Do you mean you're getting response empty or that's an error? – Liam Mar 10 '18 at 08:10
  • Well, do you getting response if you used content type `application/x-www-form-urlencoded` try to send it with no headers or add mode: "no-cors", – Liam Mar 10 '18 at 08:28
  • when I set type to application/x-www-form-urlencoded ...and mode to "no-cors" at the same time...I used to get the $_POST data....@Liam – Indranil Talukdar Mar 10 '18 at 08:53
  • I don't see any errors in the code, I guess because I added credentials try to remove it if this wont work consider asking this another question – Liam Mar 10 '18 at 17:07
  • Consider asking this issue in another question – Liam Mar 11 '18 at 03:24