Can't get data from Mysql DB using VueJs

Question

I tried to get data from mysql db using vuejs and axios by {{orderdtls.id}} in front-end but the data respnose is null. Also I've checked my php code but no problem was found and php code itself separately works fine.

PHP code :

    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE');
    header('Access-Control-Allow-Headers: X-Requested-With,Origin,Content-Type,Cookie,Accept');
    $Catch_Query = json_decode(file_get_contents("php://input"));

 if($Catch_Query->action == 'fetchdata'){
    
              $orderid = $_GET['uniqid'];
              $getorder = "SELECT * FROM ordertbl WHERE uniqid='$orderid'";
              $order_query = $con->query($getorder);
              $order_init = $order_query->fetch_assoc();
              $Order_detalis = array();

              $Order_detalis[] = $order_init;
              echo json_encode($Order_detalis);
           
            }

Vue Script :

var OrderInfo = new Vue({
            el: '#rdp',
            data:{
                orderdtls:'',
            },
            methods:{
                fetchOrderDtls:function(){
                    axios.post(BaseUrl + '/core/core.php', {action:'fetchdata'}).then((response) => {
                        OrderInfo.orderdtls = response.data;
                        console.log(response);
                    }).catch(function(errors){
                        console.log(errors);
                    });
                }
            },
            created(){
                this.fetchOrderDtls();
            }


    });

This is the console log:

{data: "", status: 200, statusText: "", headers: {…}, config: {…}, …}
config: {url: "https://example.com/core/core.php", method: "post", data: "{"action":"fetchdata"}", headers: {…}, transformRequest: Array(1), …}
data: ""
headers: {access-control-allow-headers: "X-Requested-With,Origin,Content-Type,Cookie,Accept", access-control-allow-methods: "GET, POST, OPTIONS, PUT, DELETE", access-control-allow-origin: "*", content-length: "0", content-type: "text/html; charset=UTF-8", …}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
status: 200
statusText: ""
__proto__: Object

Where is $_GET['uniqid'] coming from? That should be undefined — Dan
– Dan, Commented Jan 11, 2021 at 23:00
@Dan It comes from a variable in url like example.com/page.php?uniqid=123 — Aly
– Aly, Commented Jan 11, 2021 at 23:02
@Dan The uniqid is shown in page url and i think when php file excuted also the body of the if statement will be excuted and $orderid will fill with uniqid.I set the uniq id manually in php file but nothing changed. — Aly
– Aly, Commented Jan 11, 2021 at 23:34
Look again at your Vue code. There is no uniqid in the url you axios.post to. I posted an answer to show you. When you set manually, what do you see when you var_dump($order_init) ? — Dan
– Dan, Commented Jan 11, 2021 at 23:39
@Dan Nothing, even not NULL It should be null anyway, I doubt if statement not excuted.. — Aly
– Aly, Commented Jan 11, 2021 at 23:50

Dan · Accepted Answer · 2021-01-12 18:56:50Z

1

Edit: Chat discussion revealed that a 301 redirect was causing the payload not to arrive at the server route. Answer below is still valid.

The code needs to pass a uniqid in the data object for the database call. Also, $_GET will be empty since you are doing an axios post rather than a get.

Pass the uniqid along with the other data:

axios.post(BaseUrl + '/core/core.php', {
  action:'fetchdata',
  uniqid: 1                      // <-- Passing the `id` now as well ✅
}).then((response) => {
  OrderInfo.orderdtls = response.data;
  console.log(response);
}).catch(function(errors){
  console.log(errors);
});

In the PHP backend, get this uniqid from the post data stored from file_get_contents:

if($Catch_Query->action == 'fetchdata'){
   $orderid = $Catch_Query->uniqid;
   ...
}

edited Jan 12, 2021 at 18:56

answered Jan 11, 2021 at 23:33

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't get data from Mysql DB using VueJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related