Cannot get response from GET request to PHP API by AJAX jQuery

Question

I am trying to get the data while the person inputs the text using a "keyup" event in jQuery.

I'm actually searching in database to find all the words which match with pattern. However, I'm not getting the response from PHP API. The error is

404 - Not found.

I am new in AJAX jQuery and I'm trying to understand where is could be the problem. Also, I tested the PHP file with Postman and it works, returning json format data. So, I assume that the problem is with my Jquery code.

There is my AJAX jQuery where I'm sending input value.

var searchRequest = null;
$(function() {
  var minlength = 3;

  $("#phrEn").keyup(function() {
    var lang = $('option:selected', "#lang"),
      value = $('option:selected', "#lang").attr('value');
    var that = this,
      value1 = $(this).val();
    if (value.length >= minlength) {
      if (searchRequest != null)
        searchRequest.abort();
      searchRequest = $.ajax({

        type: "GET",
        url: "/../api/english/createPhrase.php",
        data: {
          'tablename': value,
          'pattern': value1
        },
        dataType: "json",
        success: function(data) {

          $.each(data, function(key, value) {
            $("#result").append(value);
          });
        },
        complete: function() {

        }

      });
    }

  });

});

<form action="" method="POST" id="formid">
  <h3>My first dictionary!</h3>
  <div class="label">
    <label>Translate from English</label>
  </div>
  <div class="enform">
    <textarea class="form" id="phrEn" name="enPhrase" placeholder="Type phrase on English language" cols="50" rows="10" wrap="hard"></textarea>
  </div>
  <div class="addbutton">
    <button class="button" type="submit" id="btnAdd" name="submit" onclick="insertIntoDatabase();">Add</button>
  </div>
  <div class="selectlist">
    <div class="dropdown" style="float:center">

      <div class="dropdown-content">
        <label>To</label>
        <select name="language" id="lang">
          <option value="spanish">Spanish</option>
          <option value="french">French</option>
          <option value="german">German</option>
          <option value="russian">Russian</option>
        </select>
      </div>
    </div>
  </div>
  <div class="otherform">
    <textarea class="form" id="phr" name="Phrase" placeholder="Translatated phrase on other language" cols="50" rows="10" wrap="hard"></textarea>
  </div>
  <br>
  <button class="button" type="submit" name="submit">Translate</button>
</form>
</div>
<div class="margin2">
  <span><p id="result"></p></span>
</div>

This is my PHP file which I'm calling.

    <?php 
//Headers
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Access-Control-Allow-Headers, Content-Type, Access-Control-Allow-Methods, Authorisation, X-Requested-With');

include_once '../../config/dbh.php';
include_once '../../model/english.php';
include_once '../../model/spanish.php';
include_once '../../model/french.php';
include_once '../../model/german.php';
include_once '../../model/russian.php';

$database = new Dbh();
$db = $database->connect();

    $tablename = $_GET['tablename'];

    $pattern = $_GET['pattern'];

    $query = 'SELECT english.phrase, '.$tablename.'.phraseSp

    FROM english

    LEFT JOIN '.$tablename.' ON english.id = '.$tablename.'.english_id

    WHERE english.phrase LIKE "'.$pattern.'%"';

    $stmt = $db->prepare($query);
    $result = $stmt->execute([$tablename, $tablename, $tablename, $pattern]);         
    $num = $stmt->rowCount();

    $lEnglish = new English($db);

    $lSpanish = new Spanish($db);

    $phrEn = $lEnglish->phrase;

    $phr = $lSpanish->phrase;

    if($num > 0) {

    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

    echo json_encode($rows);

    } else {

    echo json_encode(

    array('message' => 'No phrases found')

     );

    }

Answer 1

I have the project running on my localhost, the "/../" means that I have index,php file in the public folder and I need to go up a level and then go to api folder where I have different folders.

You can only access a PHP program if it has a URL.

Assuming your public folder is the DocumentRoot, then any files outside that directory do not have URLs .

You can't send .. to an HTTP server and access arbitrary files on it. Imagine if people were able to use ../../../../../etc/passwd to collect the password files of any server.

You need to move your api folder so it has a URL (or give it a URL through some other mechanism like the Apache Alias directive).