使用Ajax和Javascript从html按钮运行php File

Question

I've got a php function that i would like to run from a Html button I've got. The php function is on a separate file than the Html button.

So I've managed to do this with:

<input type="submit" name="test" id="bt1" value="RUN" /><br/>

But that is not what i want to do. I want to call the php function with:

<button id="bt1" class="button button5">< Random </button>

as there are other actions coupled with the button that need to run at the same time.

Side note: My php function gets info from a json file.

I've got 3 files.

File 1 (AF.php) this is where the button is File 2(Display.php) This is where my jquery/javascript/ajax scripts are File 3(Names.php) This is where the php function is. I want to use button from File 1 to run php function from File 3.

So here is what I've tried so far:

File 1(AF.php)

 button id="bt1" class="button button5">< R30K</button>

File 2(Display.php)

$(document).ready(function () {
            $("#bt1").on("click", (function () {
                getName("Names.php");
            })
        });
  function getName(Names.php) {
        $.ajax({
            url:"Names.php" + Names.php,
            success:function (Names.php) {
                $("#res" + Names.php).html(result)
            }
        });

File 3(Names.php)

<?php

    function group1(){
        $jsondata = file_get_contents("Clients.json");
        $json = json_decode($jsondata, true);
        $output = '<ul>';
        foreach($json['Reps']as $reps){
            $output .='<h4>' .$reps['Client']."<h4>";
            $output .= "<li>".$reps['repCode']."</li>";
        }

        $element = $json['Reps'][array_rand($json['Reps'])];
        echo $element['Client'];
        echo " ";
        echo $element['repCode'];
    }

    if(array_key_exists('bt1',$_POST)){
        group1();
    }

    ?>

Desired outcome would be that I can run my function from File 3 with that Html buttom from File 1.

You're help is greatly appreciated.

Answer 1

Your HTML with that button and your jQuery code must be in the same document that is loaded by your browser, either by putting them in the same file or using php include/require.

That jQuery code will not run because you put "Names.php" everywhere (Why?). Try this:

$( function(){
    $("#bt1").click(function() {
        $.ajax({
            url: 'Names.php',
            type: 'get',
            success: function(data) {
                $("#res").html(data);
            },
        });
    });
});

This will put the ajax response string into any element with id="res" .

Code was tested and works.

Edit:

I just noticed that you are using $_POST in your php script to check if the button was clicked, so you will have to modify the jQuery ajax function:

Change type: 'get', to type: 'post',

Add data: 'bt1=1', after 'type: 'post' .