通过ajax将变量发送到php

Question

I'm trying to send a input value to php via ajax but I can't seem to get this right. I'm trying to create a datatable based on the user input.

This is my code:

<input class="form-control" id="id1" type="text" name="id1">

My javascript code:

<script type="text/javascript">
$(document).ready(function() {

var oTable = $('#jsontable').dataTable();  //Initialize the datatable

    $('#load').on('click',function(){
        var user = $(this).attr('id');
        if(user != '') 
        { 
        $.ajax({
            url: 'response.php?method=fetchdata',
            data: {url: $('#id1').val()},
            dataType: 'json',
            success: function(s){
            console.log(s);
                    oTable.fnClearTable();
                        for(var i = 0; i < s.length; i++) {
                         oTable.fnAddData([
                                    s[i][0],
                                    s[i][1],
                                    s[i][2],
                                    s[i][3],
                                    s[i][4],
                                    s[i][5],
                                    s[i][6],
                                    s[i][7]
                                           ]);                                      
                                        } // End For

            },
            error: function(e){
               console.log(e.responseText); 
            }
            });
        }
    });
});
</script>

My php script:

<?php
    $conn = pg_connect(...);
$id1 = $_POST["id1"];
    $result = pg_query_params($conn, 'SELECT * FROM t WHERE id1 = $1 LIMIT 20', array($id1));
    while($fetch = pg_fetch_row($result)) {
        $output[] = array ($fetch[0],$fetch[1],$fetch[2],$fetch[3],$fetch[4],$fetch[5],$fetch[6],$fetch[7]);
    }
    echo json_encode($output);
?> 

I don't know a lot of js but my php is correct i test it. So i guess the problem is in the javascript code. The problem is, my datatable is not being created based on the user input. Thank you!

Answer 1

change

data: {url: $('#id1').val()},

to:

type: 'POST',
data: {id1: $('#id1').val()},

However the problem might be bigger. You might not be getting the correct data from PHP. You can debug by adding the error option to your ajax() call, like this:

$.ajax({
    url: 'response.php?method=fetchdata',
    type: 'POST',
    data: {id1: $('#id1').val()},
    dataType: 'json',
    success: function(s){
    },
    error: function (xhr, status, errorThrown) {
        console.log(xhr.status);
        console.log(xhr.responseText);
    }
});

Then check your browser's Console for the output, this should give you some type of error message coming from PHP.

My assumption is that since you are using dataType: 'json', the ajax request expects JSON headers back, but PHP is sending HTML/Text. To fix, add the correct headers before echoing your JSON:

header('Content-Type: application/json');
echo json_encode($output);