html - ajaxを使用してhtmlを埋める

Question

私は現在、AJAX 呼び出しによって部分的に埋められるべき項目のリストを持っています。私が持っているもの：

<li>Hello, username</li>

AJAX 呼び出しは、データベースからユーザー名を取得します。liタグ内のすべてのテキストはストレート テキストであるため、取得した情報を追加して "Hello" の横に表示するにはどうすればよいでしょうか。

AJAX:

ajax({
    type: "GET"
    url: '../info
    success: function (data){
        if (data != ''){
            var user = info.username;
       }
    } 
})

変数 user をリスト項目タグにどのように配置しますか? 次のようなことができますか

<li>Hello, "$user"</li>

Answer 1

まず、コンテナにユーザー名のプレースホルダーを配置する方がおそらく簡単です。

<li>Hello, <span id="username">username</span></li>

次に、ajax 要求が json 形式の応答を返すことを期待している場合は、dataTypeそれを解析するオプションを設定する必要があります。

ajax({
    type: "GET"
    url: '../info',
    dataType: 'json',
    success: function(data) {
        if(data) {
            $("#username").text(data.username);
        }
    } 
});

ユーザー名がテキストとして直接返される場合:

success: function(data) {
    if(data != '') {
        $("#username").text(data);
    }
} 

Answer 2

あなたの AJAX リクエストは本当に JavaScript オブジェクトを返しますか? 実際には JSON を返すと思われるので、デコードする必要があります。

$.ajax({
    type: "GET",
    url: '../info',
    success: function(data) {
        if(data != '')
        {
            var info = $.parseJSON(data),
                user = info.username;
            $('li').text('Hello, '+user);
        }
    } 
});

Answer 3

アイテムを のようにフォーマットできれば、作業が<li>Hello, <span id = "username">username</span>楽になります。

次に、次のようなことができます。

if (data != ''){
  var user = info.username;
  $('#username').html(user);
}