为什么我无法使用javascript从输入中获取价值？

Question

When i press on click here It's wil be alert blank and blank value.

I want to know why not alert 400 and 400

test1.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="first_image_data_url_fid" style="display: block;">
    <input type="text" name="first_image_data_url" id="first_image_data_url"/>

    <input type="text" name="first_image_data_dimension_width" id="first_image_data_dimension_width"/>
    <input type="text" name="first_image_data_dimension_height" id="first_image_data_dimension_height"/>
</form>
<span id="mySpan_check_image_data_width_height"></span>

<div onclick="test_fn()">click here</div>

<script language="JavaScript" type="text/javascript">
function test_fn()
{
var first_image_data_url = "https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg";
document.getElementById("first_image_data_url").value = first_image_data_url;
document.getElementById("first_image_data_dimension_width").value = "";
document.getElementById("first_image_data_dimension_height").value = "";
$.ajax
(
    {
        url: 'test2.php',
        type: 'POST',
        data: $('#first_image_data_url_fid').serialize(),
        cache: false,
        success: function (data) {
            $('#mySpan_check_image_data_width_height').html(data);
            //get_first_image_data_width_height();
        }
    }
)

var item = get_first_image_data_width_height();
}
</script>


<script>
function get_first_image_data_width_height(){
    var item;
    var first_image_data_dimension_width_val = document.getElementById("first_image_data_dimension_width").value;
    alert(first_image_data_dimension_width_val);

    var first_image_data_dimension_height_val = document.getElementById("first_image_data_dimension_height").value;
    alert(first_image_data_dimension_height_val);

var item = "0";

    return item;
}
</script>

test2.php

<?PHP
session_start();
include("connect.php");
$first_image_data_url = mysqli_real_escape_string($db_mysqli,$_POST['first_image_data_url']);

$first_image_data_dimension = getimagesize($first_image_data_url);
$first_image_data_dimension_width = $first_image_data_dimension[0];
$first_image_data_dimension_height = $first_image_data_dimension[1];
?>

<script>
document.getElementById("first_image_data_dimension_width").value = "<?PHP echo $first_image_data_dimension_width; ?>";
document.getElementById("first_image_data_dimension_height").value = "<?PHP echo $first_image_data_dimension_height; ?>";
</script>

Answer 1

If I understood your question correctly, you want to know why alerts gives you an empty string even if you see 400 and 400 in your inputs. It is because JS is asynchronous language and your timeline looks like this:

function test_fn()
{
var first_image_data_url = "...";
// (1) setting an empty values
document.getElementById("first_image_data_url").value = first_image_data_url;
document.getElementById("first_image_data_dimension_width").value = "";
document.getElementById("first_image_data_dimension_height").value = "";
// (2) starting AJAX call
$.ajax
(
    {
        url: 'test2.php',
        type: 'POST',
        data: $('#first_image_data_url_fid').serialize(),
        cache: false,
        success: function (data) {
            // (4) END of AJAX call

            $('#mySpan_check_image_data_width_height').html(data);
            //get_first_image_data_width_height();
            // you should get your 400 and 400 here
            //var item = get_first_image_data_width_height();

        }
    }
)
// (3) showing the result
var item = get_first_image_data_width_height();
}

If you look carefully, you will see that you try to alert values before they come.

BTW, you don't need to do mysqli_real_escape_string before get_image_size .

If you don't do any calculations on the image nor downloading it, you can obtain it dimensions by pure JS. See this answer