CODEWITHSUNDEEP
phpjavascriptjqueryajax
user2452509
user2452509

Reputation: 13

How to link and execute a PHP file from a Javascript script?

I would like to call and execute a segment of PHP code located on an external file. I understand the way of doing that involves jQuery. Here's is my code so far:

<html>
<head>
    <title>test</title>
</head>

<body>

    <script src="jquery.js"></script>
    <script language="javascript" type="text/javascript"> 
         $.post("ext.php", { name: "John", time: "2pm" })
        .done(function(data) {
          alert("Data Loaded: " + data); });

        $(document).ready(function(){
    $(this).load('ext.php');});

    </script>  

</body>

And here is the external file (ext.php):

<?php
echo $_POST['name'] . ' and- ' . $_POST['time'];
?>

The code should print the variables name and time on the screen (as well as in the popup window). The popup works fine, but the code doesn't print the veriables on the screen.

Thanks :)

Upvotes: 0

Views: 331

Answers (3)

cssyphus
cssyphus

Reputation: 40038

Forgive me if you know this already, but in case you don't:

You are using $.post() in your example, which is a streamlined form of the $.ajax() jQuery method. I suggest using this easier (but larger) format until you are very confident with AJAX. $.ajax() also allows you to do much more than the streamlined (quick) $.post method.

I added a couple of input boxes for you to type some information. Also, you need a place to put the stuff to appear on the screen, so I created a DIV for that.

Ajax posts data to an external php file, which processes the data it receives, and sends back an answer. It looks like this:

FILE #1:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                $('#mybutt').click(function() {
                    var nom = $('#yername').val();
                    var tim = $('#thetime').val();

                    $.ajax({
                        type: "POST",
                        url: "receiving_file.php",
                        data: 'name=' + nom + '&time=' +tim,
                        success:function(data){
                            alert('This was sent back: ' + data);
                            $('#report').html(data);
                        }
                    }); //END ajax

                }); //END click fn

            }); //END document.ready
        </script>
    </head>
<body>

Name: <input type="text" id="yername"><br>
Time: <input type="text" id="thetime"><br><br>
<input type="button" id="mybutt" value="Go">
<br><Br>
<div id="report"></div>

FILE #2: receiving_file.php

<?php
    echo 'You entered: ' . $_POST['name'] . ' and- ' . $_POST['time'];

Upvotes: 4

Marcelo Pascual
Marcelo Pascual

Reputation: 820

Try this: 

<script type="text/javascript"> 
    $(document).ready(function(){        
        $.post("ext.php", { name: "John", time: "2pm" }).done(function(data) { 
            alert("Data Loaded: " + data);
            $('body').html(data);
        });
    });
</script>

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

You can use post with load that way i think:

$(document).ready(function () {
    $(this).load('ext.php', {
        name: "john",
        time: "2pm"
    }, function (data) {
        $('body').append(data);
    });
});

Upvotes: 0

Related Questions