How a JavaScript Request Reaches PHP

An AJAX feature is not one operation. JavaScript builds a request, resolves an endpoint URL, selects an HTTP method, serializes the body, sends headers and waits for a response. The browser may apply cookie, origin and CORS rules. PHP then reads the request using a mechanism that must match the transmitted format. The endpoint performs validation and database work before returning an HTTP status and response body.

A failure at any stage may look like “Fetch does not work.” The endpoint may return a 404 HTML page. A JSON body may be read incorrectly from $_POST. A warning may appear before otherwise valid JSON. The database operation may succeed, but JavaScript may fail while parsing an empty response. The browser may also resolve the Fetch promise even though the server returned an HTTP error response.

Match the Request Body to the PHP Reader

Why “Unexpected Token <” Usually Means HTML

JSON must begin with a valid JSON token such as a brace, bracket, quote, number, true, false or null. A less-than character often means the response begins with an HTML tag.

The HTML may be:

• A PHP warning formatted with HTML.
• An Apache or hosting error page.
• A 404 page from the wrong endpoint URL.
• A login page returned after the session was lost.
• A complete website page instead of the AJAX endpoint.

Read the raw text before forcing JSON parsing:

const response = await fetch("ajax/save-record.php");

const rawText = await response.text();

console.log(rawText);

Once the raw response is known, fix the PHP or routing problem. Do not remove response.json() merely to hide an endpoint that is returning the wrong format.

Fetch Does Not Reject Every HTTP Error

A Fetch promise generally rejects for request or network failures, not merely because the server returned a status such as 400, 404 or 500. The response must be inspected.

const response = await fetch("ajax/save-record.php", options);

if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}

After the HTTP status is checked, validate the application-level response. A server can return status 200 with {"success": false}, although using a suitable error status is normally clearer.

const data = await response.json();

if (!data.success) {
  throw new Error(data.message || "The operation failed.");
}

Do Not Manually Set FormData’s Multipart Header

A multipart request separates its fields and files using a boundary. When a browser sends a FormData object, the browser builds that multipart body and supplies the matching Content-Type boundary.

fetch("upload.php", {
  method: "POST",
  headers: {
    "Content-Type": "multipart/form-data"
  },
  body: formData
});

Send the FormData object without overriding that header:

fetch("upload.php", {
  method: "POST",
  body: formData
});

Authorization or CSRF headers can still be added when required. The warning applies specifically to replacing the browser-generated multipart Content-Type and boundary.

Return One Clean JSON Document

A PHP endpoint should not mix JSON with warning output, HTML, debug dumps or text from included files. Even one extra character can make a response invalid for strict JSON parsing.

Common sources of corruption include:

• var_dump() and print_r().
• Debugging echo statements.
• PHP warnings and notices displayed in the response.
• HTML templates included by the endpoint.
• Authentication code redirecting to a full login page.
• Whitespace or text outside the intended PHP response.

During production, log technical information on the server and return a safe JSON message with a suitable status code.

{
  "success": false,
  "code": "VALIDATION_FAILED",
  "message": "Check the submitted fields.",
  "errors": {
    "title": "Enter a title."
  }
}

Why an AJAX Endpoint Can Lose the Login Session

A normal page and an AJAX endpoint are separate HTTP requests. The endpoint must start or resume the PHP session before reading $_SESSION.

session_start();

if (empty($_SESSION["user_id"])) {
    http_response_code(401);

    echo json_encode([
        "success" => false,
        "message" => "Authentication required."
    ]);

    exit;
}

Same-origin requests normally use relevant cookies. Cross-origin requests may require an explicit credentials mode and matching server-side CORS configuration. The cookie’s domain, path, SameSite, Secure setting, hostname and port can also affect whether the expected authenticated request reaches PHP.

Why the Page Reloads Before Fetch Completes

A button inside a form acts as a submit button unless its type says otherwise. If a submit handler starts Fetch without preventing the normal submission, the browser can navigate or reload before the asynchronous request completes.

form.addEventListener("submit", async function (event) {
  event.preventDefault();

  // Send Fetch request here.
});

Another option is type="button" for a button that should never submit the form normally. Avoid using a click handler and a form submit handler for the same operation unless their responsibilities are deliberately separated.

Why an AJAX Request Runs Twice

Use the Network tab to determine whether the server receives one request or two. Duplicate database rows are not proof that JavaScript sent two requests; the PHP endpoint might execute the same query twice.

Frontend causes include:

• An inline onclick plus an event listener.
• A form submit listener plus a button click listener.
• The same script loaded twice.
• The same listener registered after every modal opening.
• A double-click on an enabled button.
• Automatic retry logic.

Disable the submit control while the request is pending and restore it in a finally block. The database should also enforce uniqueness where duplicate records are never valid.

Handle Empty Responses Safely

Status 204 means the response intentionally has no content. Calling response.json() on an empty response can cause a parsing failure. A PHP endpoint can also accidentally return an empty body after updating the database.

Choose one consistent contract:

• Return status 204 and do not attempt JSON parsing.
• Return status 200 or 201 with one documented JSON response body.

Avoid randomly returning JSON from some success branches and an empty body from others.

Safe PHP AJAX Debugging Order

1. Confirm that the event handler runs once.
2. Inspect the exact endpoint URL and method in the Network tab.
3. Read the status code and raw response text.
4. Compare the body format with the Content-Type.
5. Compare the request body with the PHP input reader.
6. Remove warnings, HTML and debug output from the JSON response.
7. Check PHP logs for the first backend error.
8. Confirm the session and authorization state.
9. Check response.ok and the application success field.
10. Reset loading and disabled controls inside finally.

Continue Your CodeZips Debugging Workflow

Technical References

• MDN: Fetch API
• MDN: Using the Fetch API
• MDN: Using FormData Objects
• PHP Manual: php://input
• PHP Manual: json_decode()
• PHP Manual: json_encode()
• PHP Manual: header()
• PHP Manual: session_start()