如何将此值传递给javascript并在HTML页面上按1显示1？

Question

Like this I have 100 values in database

I want this values to be passed to javascript via PHP using ajax.

PHP CODE:

for($i=0;$i<=9;$i++)

{

$random = (10 * $i) + rand(1,10);

$result = mysql_query("SELECT * FROM check_val WHERE id = '$random'") or exit(mysql_error());

if(mysql_num_rows($result) == 1){

$row = mysql_fetch_assoc($result);
$value = $row['val'];       
$alpha = $row['alp'];

}   

$arr = array("val"=>$value,
         "alp"=>$alpha  
        );

echo json_encode($arr)."<br>";

}

OUTPUT:

{"val":"1","alp":"A1"}<br>
{"val":"15","alp":"A15"}<br>
{"val":"23","alp":"A23"}<br>
{"val":"37","alp":"A37"}<br>
{"val":"42","alp":"A42"}<br>
{"val":"51","alp":"A51"}<br>
{"val":"67","alp":"A67"}<br>
{"val":"71","alp":"A71"}<br>
{"val":"84","alp":"A84"}<br>
{"val":"100","alp":"A100"}<br>

AJAX code:

$.ajax({
url: "index.php",
type: "post",
dataType: "json",

success: function(response) {

    $("#val").html(response.val);
    $("#alp").html(response.alp);

  }
});

This ajax code is used when the output is this :

{"val":"1","alp":"A1"}

ie just a single value

How can I read all the values and display them 1 by 1 when the button is clicked in the HTML page.

HTML code:

<p id="val"></p><br>
<p id="alp"></p><br>
<button>Click Me</button> 

Answer 1

Try this: backend:

$offset = (int) $_POST['offset'];
if ( $offset < 0 ) {
    $offset = 0;
}
$result = array();
$resource = mysql_query("SELECT * FROM check_val ORDER BY id LIMIT 1 OFFSET {$offset}");
if ( $resource === false )
{
    exit(mysql_error());
} elseif ( mysql_num_rows( $resource ) ) {
    $result = mysql_fetch_assoc($resource);
}
echo json_encode( $result );

frontend html:

<div class="wrapper">
    <p id="val"></p><br>
    <p id="alp"></p><br>
</div>
<button>Click Me</button>

frontend javascript:

$("button").on("click", function () {
    var $container = $(".wrapper");
    var offset = parseInt( $container.data("offset"), 10 ) || 0;

    $.ajax({
        url: "index.php",
        type: "post",
        dataType: "json",
        data: {offset: offset},
        success: function(response) {
            if ( response != undefined && response.val != undefined ) {
                $("#val").html(response.val);
                $("#alp").html(response.alp);
                $container.data("offset", offset+1);
            }
        }
    });
});

Answer 2

I'm not 100% sure if this is the answer you're looking for but I'll try. I'm also not too sure how you're using the ajax.

I'd create a script element and JavaScript json variable from the PHP as follows:

echo "<script>var jsonContent = [";

for($i=0;$i<=9;$i++) {
    ...

    echo json_encode($arr) . ","
    ...
}

echo "]</script>";

Then JavaScript (jQuery):

var clickCount = 0;

$('button').on('click', function() {
    $("#val").html(jsonContent[clickCount].val);
    $("#alp").html(jsonContent[clickCount].alp);

    clickCount++;
});

Each time the button is clicked, the content should start looping through the content in the jsonContent array.