Question posted in
You can find the official documentation here.

die(json_encode)) redirects to a page displaying json data – Jquery ajax

When form submission finishes, the page DISPLAYS the raw json data instead of logging it to the console. The php and html code are both on the same page so I wasn’t expecting the page to change at all.

POST

jQuery(function($) {
  $("#idSearch").submit(function(event) {
    $.ajax({
        url: "/index.php",
        type: "POST",
        data: $(this).serialize(),
        dataType: "json",
        sucess: function(data) {
            console.log(data);
        }
    })
  })
});

php form handling

<?php 
if (isset($_POST['orderId'])){
    header('Content-Type: application/json');
    require 'private/database.php';

    $sql = "SELECT * FROM form";
    $result = mysqli_query($conn, $sql);

    $data = array();
    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            $data[] = $row;
        }
    }
    die(json_encode($data));
}
?><!DOCTYPE html>

I’ve implemented something similar on another webpage but it works as I intended.

POST

function loadInfo() {
    jQuery(function($) {
        $.ajax({
            method: "POST",
            url: "/admin.php",
            data: {loadInfo: 1},
            dataType: "json",
            success: function(data) {
                console.log(data);
                for (var i = 0; i < data.length; i++) {
                    setMarker(data, i, "red");
                    printInfo(data, i);
                }
            }
        })
    });
}

php form handling

<?php
if(isset($_POST['loadInfo'])){
    header('Content-Type: application/json');
    require 'private/database.php';

    $sql = "SELECT * FROM form";
    $result = mysqli_query($conn, $sql);

    $data = array();
    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            $data[] = $row;
        }
    }
    die(json_encode($data));
}
?><!DOCTYPE html>

Why do these two pages behave differently?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    solved:

    <form action="index.php" method="POST" id="idSearch">
  <input type="text" name="orderId" placeholder="訂單號瑪" required><br>
  <input type="submit">
</form>

    I didn't think I needed an action parameter for the form as it was being sent to the same .php? The code worked once I added a path. Weird.


  2. 0

    You should stop the default form event.
    The browser continue the action and submit the form, so the page is reloaded using POST.

    You could prevent using Event.preventDefault()

    jQuery(function($) {
  $("#idSearch").submit(function(event) {
    event.preventDefault(); // << ADD
    $.ajax({
        url: "/index.php",
        type: "POST",
        data: $(this).serialize(),
        dataType: "json",
        success: function(data) { // << Here 'success' not 'sucess'.
            console.log(data);
        }
    })
  })
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search