如何使用 AJAX 将 HTML 变量上传到 PHP 文件

Question

On my website I am trying to basically generate a random code (which I will set up later) and then pass that code into a PHP file to later retrieve it when the client needs it. But my code just isn't working.

Javascript/HTML:

function init() {    
    var code = "12345";
        $.ajax({
            type: 'POST',
            url: 'codes.php',
            data: { code: code},
            success: function(response) {
                $('#result').html(response);
            }
        });
    }

PHP:

 <?php 
     $code = $_POST['code'];
     echo $code
 ?>

So what I understand that is supposed to happen is that the code is uploaded or 'posted' to the php file and then the #result is the echo $code. None of that happens and I have no idea.

Answer 1

Your code working perfect with some basic changes. You need a html element with id 'result'. And then you need to call your init() as per requirement.

<div id="result"></div>
<script>
function init() {    
    var code = "12345";
        $.ajax({
            type: 'POST',
            url: 'codes.php',
            data: { code: code},
            success: function(response) {
                $('#result').html(response);
            }
        });
    }
init();
</script>

Answer 2

You 100% have something of the likes of <div id="result"></div> ?
You 100% have jQuery?
You 100% have the path to the php file correct?
You 100% are calling init() on window load?

<?php 
$code = $_POST['code'];
echo $code;
?>

Answer 3

I tried this on my server in the head of my document, and it worked :) I used on complete instead of on success.

<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script>
function init() {    
    $.ajax({
        type: "POST",
        url: "codes.php",
        data: {  
                'code': '12345'
            },

        complete: function(data){
            document.getElementById("result").innerHTML = data.responseText
        },
    });
}
init();
</script>

with codes.php the same as you have :)

Answer 4

just a few notes:

1. Make sure you point your url to the correct file. You can check it by using the console network. Or you can simply print anything out, not just the $_POST data. eg:

    echo 'Test info';

2. Open browser developer panel, to see if is there any client code issue. For example, document with id 'result' existed, or you have not included jquery in. The developer console will tell you everything on the client side. For Chrome, check it out here https://developer.chrome.com/devtools

3. Have you actually called init() ?