Как подключить HTML-страницу к MySQL Workbench Server, используя JavaScript, Ajax и PHP? - PullRequest
Новая
       12

Как подключить HTML-страницу к MySQL Workbench Server, используя JavaScript, Ajax и PHP?

0 голосов
/ 05 мая 2019

У меня есть HTML-страница, где мы вводим название фильма, и если этот фильм присутствует в базе данных, то отображается имя. Я пытаюсь подключиться к базе данных, используя JavaScript, Ajax и PHP. База данных находится на MySQL Workbench Server.

Вот что я сделал:

pc.html 

<html>
<head>
    <script type="text/javascript">
      function Search_Data()
      {
            var httpr = new XMLHttpRequest();

            var movie_name=document.getElementById("moviename").value;
            console.log(movie_name);

            httpr.open("GET","get_data.php",true);
            httpr.send();
            httpr.onreadystatechange = function()
            {
                if(this.readyState==4 && this.status==200)
                {
                    alert(this.responseText);
                }
            }
      }
    </script>
    <body>
        <input type="text" name="moviename" id="moviename" placeholder="Enter a movie...">
        <br/>
        <input type="button" name="search" value="Search" onclick="Search_Data()">
        <br/>
        <span id="response"></span>
    </body>
</head>    
</html>

get_data.php (Ниже приведен пробный код, чтобы увидеть, работает ли он) 

<?php
  echo "Hello World"
?>

В браузере я получаю следующий результат: this

Файлы находятся в следующем месте: 

C:\Users\Admin\AppData\Roaming\MySQL\Workbench\scripts

Весь код отображается вместо «Hello World». Я новичок в веб-разработке и PHP, и я не уверен, в чем проблема.

1 Ответ

0 голосов
/ 05 мая 2019

вы используете ajax с обычным java-скриптом, я предлагаю использовать jquery ajax, и это полный пример, как подключить его к php и как получить значение или список 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<button type="button" name="search" id="search" class="btn btn-info">Search</button>

<td width="90%"><span id="employee_name"></span></td>

<a href="second.php"> second </a>

<input type="input" id="inputs" value="submit">
<p id="email"></p>
<p id="pass"></p>
<p id="permission"></p>
<script>

$(document).ready(function(){
 $('#search').click(function(){

    var val = document.getElementById("inputs").value;
  var id= $('#employee_list').val();
  setInterval(function(){ 
   $.ajax({
    url:"db.php",
    method:"POST",
    data: {val : val},
    dataType:"JSON",
    success:function(data)
    {
     $('#email').text(data[val].email);
     $('#pass').text(data[val].pass);
     $('#permission').text(data[val].perm);

      }
   })

  }, 1000);
 });
});

</script>
</body>
</html>

php файл 

 <?php

$items = array();
 $url="localhost";
 $user= "root";
 $pass="";
 $dbname="test";
$value= 0;
if(isset( $_POST['val'])){

  $value= $_POST['val'];

}
 $num=0;

 $connect=mysqli_connect($url,$user,$pass,$dbname);

$result="SELECT email,pass,permission FROM test where id=$value";

 $sql=mysqli_query($connect,$result);


 while($row=mysqli_fetch_assoc($sql) ){
     /* add a new item */
     $num++;
     $items[$value] = array(

      'email' => $row['email'],
      'pass' => $row['pass'],
      'perm' => $row['permission']


  );

}

$json_response = json_encode($items);
echo $json_response;

?>
...