0

I using Javascript and Ajax for sending and receiving data from the server. I read some where that its some error in the server file that why its giving this error but I can't find any.

My html file 

<select class="form-control" id="semester" name="semester">
    <option value=-1>Select Semester</option>
    <option value=1>Semester </option>
    <option value=1>Semester 1</option>
    <option value=2>Semester 2</option>
    <option value=3>Semester 3</option>
    <option value=4>Semester 4</option>
    <option value=5>Semester 5</option>
    <option value=6>Semester 6</option>
    <option value=7>Semester 7</option>
    <option value=8>Semester 8</option>
</select>

<<select class="form-control" id="category_id" name="category_id">
    <option value=-1>Select Catagory</option>
    <option value=1>Institutional Reqt.</option>
    <option value=2>Adv. Core</option>
    <option value=3>Foundation</option>
    <option value=4>Adv. Elect</option>
</select>

<input class="btn btn-primary" type='button' id='find' value='find' name="find">

</form>

<table>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
    </tr>

    <tbody id="data">

    </tbody>
</table>

My JavaScript file

This is the send the semester number and the category that the user wants to see.

  <script>
        $("#find").click(function(){
        var semester=$("#semester").val();
        var category_id=$("#category_id").val();
        $.ajax({
                url:'data.php',
                type:'GET',
                data:{semester:semester,category_id:category_id},
                success:function(data){
                    console.log(data);
                    if(data==1){
                        console.log("Very noice");
                    }
                }
            })  
        });

This is to receive the information from the server.
//call ajax

    var ajax= new XMLHttpRequest();
    var method='POST';
    var url = 'data.php';
    var asynchronous = true;

    ajax.open(method, url, asynchronous);
// sending ajax request
    ajax.send();    

//receiving response from data.php
    ajax.onreadystatechange = function(){

        if(this.readyState == 4 && this.status == 200)
        {
            //converting JSON back to array
            var data = JSON.parse(this.responseText);
            console.log(data); 

            var html = "";
            //loopinh through the data
            for(var a=0;a<data.length;a++){
                var firstName=data[a].semester;
                var lastName=data[a].course_title;
                var jobTitle = data[a].course_desc;

                html += "<tr>";
                html += "<td>" + firstName + "</td>";
                html += "<td>" + lastName + "</td>";
                html += "<td>" + jobTitle + "</td>";
                html += "</tr>";

                document.getElementById("data").innerHTML = html; 

            }
        }
    }

</script>

and here is my php file

<?php

//getting data from database

$conn = mysqli_connect("localhost","root","","bscis1620");


$semester = $_GET['semester'];
$category_id= $_GET['category_id'];



    $query = 'select * from bscis1620';
    $check = 0;
    $semesterq="$semester = bscis1620.semester";
    $category_idq="$category_id = bscis1620.category_id";
    if($semester>0){
        if($check == 0){
            $query = $query. " where ". $semesterq;
            $check++;
        }
        else{
            $query = $query. " and ". $semesterq;
        }
    }
    if($category_id>0){
        if($check == 0)
            $query = $query. " where ". $category_idq;
        else{
            $query = $query. " and ". $category_idq;
        }
    }


    $result=mysqli_query($conn, $query);



$data = array();
while($row = mysqli_fetch_assoc($result))
{
    $data[] = $row;
}

echo json_encode($data);

?>

I have check my query by console.log and I get the correct information from the database, I'll really appreciate any help.

Muhammad Ahsan Mukhtar
  • 23
  • 6
  • 1
    Did you check the content of `this.responseText`? Try to log that before you `JSON.parse` it. – Ivar Feb 12 '19 at 21:56
  • It seems likely to me that you're getting an HTML response because your PHP script is actually displaying an error message somewhere. This may be because the script only appears to accept `GET` parameters, but in one of the two JS scripts you show you are sending via `POST`. (I'm not sure why you show us 2 different, but similar, bits of JS code.) Also, your PHP code is wide open to SQL injection. – Robin Zigmond Feb 12 '19 at 22:02
  • @Ivar I have tried to log it, I am getting the thing I wanted – Muhammad Ahsan Mukhtar Feb 12 '19 at 22:13
  • @RobinZigmond so you're telling me to change the GET to POST. – Muhammad Ahsan Mukhtar Feb 12 '19 at 22:14
  • @RobinZigmond this is just practice, I am new developer, how do I prevent SQL injection – Muhammad Ahsan Mukhtar Feb 12 '19 at 22:15
  • No, not necessarily. You just need to make sure the request method matches what you're checking for in the PHP. Best way to debug is to `console.log(this.responseText)` right before you try to `JSON.parse` it, because the error message clearly shows you've got a `<` at the start which obviously isn't JSON. – Robin Zigmond Feb 12 '19 at 22:15
  • @MuhammadAhsanMukhtar - that's a massive and completely separate topic, much discussed on SO before. Try here as a starting point: https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php – Robin Zigmond Feb 12 '19 at 22:16

0 Answers0