如何在 js 处理之前加载 ajax 代码？

Question

我正在尝试通过 url.

从评分创建评论系统

我想使用 ajax 检索 url 的内容，然后在我的 js 中将其作为数字处理。

但我觉得 ajax 是在我的页面加载后发生的，所以我的 js returns 对我来说没什么。

请问你有解决我问题的办法吗？

谢谢

（我是初学者，我调整过......注意你的眼睛！^^）

<body>
     
    <div class="container">
        <div class="medal">
            <pre id="cible"></pre>
            <span class="stars" id="stars" data-rating="" data-num-stars="5" ></span>
            <div class="note"><span id="note"></span><span>/5</span></div>
            <div class="avis"><span id="avis"></span><span> avis clients</span></div>
            <div class="medal_text">Avis vérifiés</div>
        </div>
    </div>
 
</body>

ajax/JS

$.ajax({
    method: "GET", // GET ou POST comme tu veut
    url: "content.php", // La page qui va faire le traitement
    dataType: 'json',
    data: {
        cle: "pre"
    }, // Les donnees a envoyer
    success: function (resultat) {
        $('#cible').html(resultat);
    }
})
 
// LIRE TEXT ET SORTIR TABLEAU DES 2 VALEURS
var myString = document.getElementsByTagName('pre')[0].innerHTML;
var splits = myString.split(";", 2);
 
console.log(+splits);
console.log(+splits[0]); // affiche "le premier élément"
console.log(+splits[1]);
 
note = splits[1]
 
function roundHalf(note) {
    return Math.round(note * 10) / 10;
}
document.getElementById("note").innerHTML = roundHalf(note);
 
 
avis = splits[0]
document.getElementById("avis").innerHTML = avis;
 
 
// $(element).attr('data-key', 'value');
 
var myData = document.getElementById("stars").setAttribute("data-rating", roundHalf(note));
 
//ES5
$.fn.stars = function () {
    return $(this).each(function () {
        var rating = $(this).data("rating");
        var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fas fa-star"></i>');
        var halfStar = ((rating % 1) !== 0) ? '<i class="fas fa-star-half-alt"></i>' : '';
        var noStar = new Array(Math.floor($(this).data("numStars") + 1 - rating)).join(
            '<i class="far fa-star"></i>');
        $(this).html(fullStar + halfStar + noStar);
    });
}
 
//ES6
$.fn.stars = function () {
    return $(this).each(function () {
        const rating = $(this).data("rating");
        const numStars = $(this).data("numStars");
        const fullStar = '<i class="fas fa-star"></i>'.repeat(Math.floor(rating));
        const halfStar = (rating % 1 !== 0) ? '<i class="fas fa-star-half-alt"></i>' : '';
        const noStar = '<i class="far fa-star"></i>'.repeat(Math.floor(numStars - rating));
        $(this).html(`${fullStar}${halfStar}${noStar}`);
    });
}
$(function () {
    $('.stars').stars();
});

php


<?php
$text = file_get_contents("https://cl.avis-verifies.com/fr/cache/2/e/8/2e88d3bd-ea3f-96a4-9db4-70d3c8494879/AWS/2e88d3bd-ea3f-96a4-9db4-70d3c8494879_infosite.txt");
echo json_encode($text);
?>

如果我在html中直接插入url的内容， <pre style="word-wrap: break-word; white-space: pre-wrap;">16;4.14</pre> 并删除 ajax 部分，代码运行正常。 final result 为什么，当我使用 ajax 填充时，下面的代码不起作用？

Answer 1

在你有价值的时候去做，而不是之前。

您在 $.ajax() 的 success 回调中有值。 JS 脚本中的所有其他代码都在此之前运行。

JS

function roundHalf(value) {
    return Math.round(value) / 10;
}
// this section runs before

$.ajax({
    method: "GET",
    url: "content.php",
    dataType: 'json',
    data: {
        cle: "pre"
    },
    success: function (resultat) {
        // NOW is the time to do the work
        var splits = resultat.split(";", 2);
        $("#note").text(roundHalf(splits[1]));
        $("#avis").text(splits[0]);
        $("#stars").data('rating', splits[1]).stars();
    }
});

// this section runs before

PHP

<?php
$text = file_get_contents("https://cl.avis-verifies.com/fr/cache/2/e/8/2e88d3bd-ea3f-96a4-9db4-70d3c8494879/AWS/2e88d3bd-ea3f-96a4-9db4-70d3c8494879_infosite.txt");
header('Content-Type: text/plain; charset=utf-8');
echo $text;
?>

如何在 js 处理之前加载 ajax 代码？

How can i load ajax code before js processing?

ajax

jquery