How do I call PHP code from another file with jQuery ajax?

Question

This is my index.php:

<!DOCTYPE html>
<html lang="en" >
    <head>
        <title>Cassette Decks</title>
        <link rel="stylesheet" href="css/styles.css">
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="js/scripts.js" ></script>
        <script>
        </script>
    </head>
    <body>
    <form role="form" id="attributes" name='attributes' class="cassette_deck_table" >
        <table id="cassette_deck_params" >
            <tr>
                <td colspan='8' >
                    <label for='type3' >Type III</label><input type='checkbox' name='type3' id='type3' value='type3' />
                    <label for='type4' >Type IV</label><input type='checkbox' name='type4' id='type4' value='type4' >
                    <label for='dbb' >Dolby B</label><input type='checkbox' name='dbb' id='dbb' value='dbb' >
                    <label for='dbc' >Dolby C</label><input type='checkbox' name='dbc' id='dbc' value='dbc' >
                    <label for='dbs' >Dolby S</label><input type='checkbox' name='dbs' id='dbs' value='dbs' >
                    <label for='dbx' >DBX</label><input type='checkbox' name='dbx' id='dbx' value='dbx' >
                    <label for='anrs' >ANRS</label><input type='checkbox' name='anrs' id='anrs' value='anrs' >
                    <label for='sanrs' >SANRS</label><input type='checkbox' name='sanrs' id='sanrs' value='sanrs' >
                </td>
            </tr>
            <tr>
                    <td><a><b>Manufacturer</b></a></td>
                    <td><a><b>Model</b></a></td>
                    <td><a><b>Made from</b></a></td>
                    <td><a><b>Made to</b></a></td>
                    <td><a><b>Has Dolby B</b></a></td>
                    <td><a><b>Has Dolby C</b></a></td>
                    <td><a><b>Has Dolby S</b></a></td>
                    <td><a><b>Has DBX</b></a></td>
            </tr>

        </table>
        <div id="resultMsg"></div>
        <select name="num_of_rows" id="nor">
            <option selected value="10" >10</option>
            <option value="25" >25</option>
            <option value="50" >50</option>
            <option value="100" >100</option>
        </select> 
        <h2>JSON</h2>
        <pre id="result"></pre>
        <button type="submit" id="search_button" name="search_button"  onClick="" />Search</button>
    </form>
    <div id="cassette_decks" >
        <script>
            $("#cassette_decks").load("cassette_tables.php");
        </script>
    </div>
    <script>
        $(document).ready(function() {
            $("#search_button").click(function(e) {
                e.preventDefault();
                var search={
                    "type3" : document.getElementById("type3").checked ,
                    "type4" : document.getElementById("type4").checked ,
                    "dbb" : document.getElementById("dbb").checked ,
                    "dbc" : document.getElementById("dbc").checked ,
                    "dbs" : document.getElementById("dbs").checked ,
                    "dbx" : document.getElementById("dbx").checked ,
                    "anrs" : document.getElementById("anrs").checked, 
                    "sanrs" : document.getElementById("sanrs").checked,
                    "nor" : document.getElementById("nor").value
                };
                var searchStr=JSON.stringify(search);
                $.ajax({
                    type: "POST",
                    url: "createTable.php",
                    dataType: "text",
                    data: {searchArray : search},
                    success : function(data,status){
                        console.log(data);
                    },
                    error : function(status){
                        console.log(status);
                    }
                });
            });
        });
    </script>
    </body>
</html>

This is roughly my createTable.php:

<?php
    if(isset($_POST['searchArray'])){
//run a bunch of code that basically creates a table from a database array
?>

I have tried looking all day on the internet on how to pass an array from jQuery to php.

Basically what I'm trying to do is delete a table and then create a new one with different parameters from the form. If I prevent the form from submitting it doesn't work.

If I use dataType : "json", it doesn't do anything (no output on success). Basically if I do send the ajax request it does successfully send it, but the POST in php just doesn't do anything.

I'm using php 8 and I just don't know what to do. I tried a different code from a page and it did work. I just don't know what to do. still new to php and js/jQuery. Any help would work.

You can pass a session variable back to your PHP code. You of course want to sanitize it before using it. — Si8
– Si8, Commented Jan 27, 2022 at 0:00
You're never using the variable searchStr, what is it for? — Barmar
– Barmar, Commented Jan 27, 2022 at 0:03
dataType: 'json' means that the PHP script returns JSON. Are you doing echo json_encode(something) in the PHP script? — Barmar
– Barmar, Commented Jan 27, 2022 at 0:04
@Barmar I did not. If I do encode a json file, will that write html code into the file? — AmonRatSO
– AmonRatSO, Commented Jan 27, 2022 at 0:24
json_decode() needs its argument to be a string, not an array. It parses the JSON string and returns an array or object. — Barmar
– Barmar, Commented Jan 27, 2022 at 0:25

Barmar · Accepted Answer · 2022-01-27 00:07:04Z

1

search is an object, not an array. But in PHP it will be turned into an associative array.

All the keys will be in $_POST['searchArray']. So you can use $_POST['searchArray']['type3'] to tell if the type3 checkbox was checked.

You could also change the jQuery code to use:

data: search,

Then each key of the search object would be a key in $_POST, so you could just use $_POST['type3']. Of course, in this case you shouldn't use if (isset($_POST['searchArray'])) since this no longer exists.

answered Jan 27, 2022 at 0:07

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

AmonRatSO Over a year ago

The thing is though, if the isset $POST does go through, the only thing that changes is that echos in the php file just display the code inside the console.

Barmar Over a year ago

If you want to do something else with the results, you need to add that to the success function.

AmonRatSO Over a year ago

So basically if the ajax request succeded, it just returns the text of what the php file would look like? I did see I could use $.load, but when I used it, it just didn't find the variables that I needed from the ajax

Barmar Over a year ago

.load() is used when the AJAX returns HTML, it gets inserted into that element.

Barmar Over a year ago

You should have the PHP script return JSON, then you can process that as a JS object and display the results where you want. Nothing happens automatically with AJAX, that's the whole point -- you have to code exactly what you want done with the response.

|

TheFaultInOurStars · Accepted Answer · 2022-01-27 00:05:00Z

0

I am not exactly sure what you are trying to do, but here is an example of how to work with Ajax:

Ajax.js

$(document).on("click", ".button-class", function() {
    var id = $(this).attr("data-id");
    $.ajax({
        type: "POST",
        url: "/absolute_path/to/php_file.php",
        data: {my_id:id, my_custom_key: "my_custom_value"},
        dataType: "JSON",
        success: function (response) {
            console.log(response);
        },
        error: function(response){
            console.log(response);
        }
    })
    .done(function(data) {
        window.location = "customers/info";
    })
})

Php_file.php

<?php
$id = $POST["my_id"];
$customValue = $POST["my_custom_value"];
$response = ["message"=> "We took your id which is $id and your custom value which is $customValue"];
echo json_encode($response);
?>

This is an elementary example of how to use ajax.

Explanation

I copied this ajax from one of my previous answers. We pass a few arguments in Ajax, as are shown in the Ajax.php file.

The PHP part is a little bit simpler. You are getting variables that are posted to the PHP file. Therefore, you call the $POST variable to read the posted data. That's it!

answered Jan 27, 2022 at 0:05

TheFaultInOurStars

3,6331 gold badge13 silver badges30 bronze badges

3 Comments

AmonRatSO Over a year ago

Can I pass any kind of array to php? there are multiple ways you can incialize a js array, I'm wondering if any type can be passed to php.

TheFaultInOurStars Over a year ago

@AmonRatSO The definition of an array is not the same in different programming languages. From what I know, you can (or in better words, you should) pass an object to the data key in Ajax. Objects are in for of {myId: "myValue"}

AmonRatSO Over a year ago

yeah I see what you mean

Collectives™ on Stack Overflow

How do I call PHP code from another file with jQuery ajax?

2 Answers 2

12 Comments

Explanation

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Explanation

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related