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

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'  >
        <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.

CodePudding user response：

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.

CodePudding user response：

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!