Ambil data dari mysql menjadi file json dengan javascript

<div>1. Ambil data dari database dan jadikan array<br>2,&nbsp; gunakan fungsi json_encode yang ada di php, contoh saya ingin mengambil data user yang berada di file user.php dan filenya saya akses melalui url http://localhost/user.php sehingga sumber code nya akan terlihat seperti ini</div><pre>&lt;?php

$con = mysqli_connect('localhost', 'root', '', 'db_name'); $sql = mysqli_query($con, "SELECT * FROM user"); $data = []; while($res = mysqli_fetch_object($sql)){ // memasukan data ke variable $data array_push($data, ["username" =&gt; $res-&gt;username, "password" =&gt; $res-&gt;password]); } // mengubah array menjadi json echo json_encode($data);

?&gt;</pre><div>3. untuk menggunakannya dengan vanila javascript pakai ajax aja contohnya seperti ini</div><pre>const xhr = new XMLHttpRequest() xhr.onreadystateChange = function(){ if(xhr.readyState === 4 &amp;&amp; xhr.status === 200){ console.log(xhr.responseText) } } xhr.open('GET', 'http://localhost/user.php', true) xhr.send()</pre><div>dan jika ingin menggunakannya di reactjs sumber codenya seperti ini</div><pre>import React, {Component} from 'react' export default class Home extends Component{ state = { data : [] } async componentDidMount(){ const req = await fetch('http://localhost/user.php') const res = await req.json() this.setstate({data: res}) console.log(this.state.data) } return( render(){..} )<br>}</pre><div><br></div><div>4. liat di console browser ( google chrome ) ctrl + shift + i, nanti data jsonnya bakalan keliatan<br>5. biasanya browser akan ngeblock request yang seperti ini dan akan muncul error CORS (cross origin resource sharing ) karena meminta data dari sumber yang berbeda misal untuk front end aksesnya dari url www.test.com dan data json tadi ada di url www.data.com&nbsp; hal ini secara default tidak dizinkan oleh browser, solusinya kita tambahkan header ini di file untuk ambil data tadi, simpan di paling atas&nbsp;</div><pre>header("Access-Control-Allow-Origin: *");</pre><div>jika cara tersebut tidak berhasil saya sarankan install extension cors<br><br>hanya itu saja yang perlu dilakukan 🙌 😎</div>