Question

这是我的JQuery代码：

$.ajax({
            type: 'POST',
            url: 'query2.php',
            data: key,
            dataType: 'json',
            success: function (msg) {

                var cnt = 0;
                $.each(msg, function(){
                    $('#jobtitle').html("<div>" + msg[cnt].jobTitle + "</div>");
                    $('#jobname').html(msg[cnt].jobName);
                    $('#fullname').html(msg[cnt].fullName);
                    $('#phone').html(msg[cnt].phone);
                    $('#mail').html(msg[cnt].mail);
                    $('#city').html(msg[cnt].city);
                    $('#description').html(msg[cnt].description);
                    cnt++;
                });

从我的query2.php我得到这样的东西：

{'JobTitle': 'a', 'jobName': 'b', ...}, {'JobTitle': 'a', 'jobName': 'c', ...}

为什么我不能打印两行结果？它只打印一行。

更新：首先，感谢您的所有答案：）

正如#Suren Srapyan所说，我使用了Key，Value +追加但结果并不好。它返回几个重复值，如：

شرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکتشرکت
گلخانهمهندسیگلخانهمهندسیگلخانهگلخانهمهندسیگلخانهگلخانهمهندسیمهندسیگلخانهمهندسیمهندسی
علی علویمصطفی کلانترعلی علویمصطفی کلانترعلی علویعلی علویمصطفی کلانترعلی علویعلی علویمصطفی کلانترمصطفی کلانترعلی علویمصطفی کلانترمصطفی کلانتر
12345609153040406123456091530404061234561234560915304040612345612345609153040406091530404061234560915304040609153040406
a@a.comM.Mastersoft@gmail.coma@a.comM.Mastersoft@gmail.coma@a.coma@a.comM.Mastersoft@gmail.coma@a.coma@a.comM.Mastersoft@gmail.comM.Mastersoft@gmail.coma@a.comM.Mastersoft@gmail.comM.Mastersoft@gmail.com
مشهدتهرانمشهدتهرانمشهدمشهدتهرانمشهدمشهدتهرانتهرانمشهدتهرانتهران
توضیحات علی علویتوضیحات مصطفیتوضیحات علی علویتوضیحات مصطفیتوضیحات علی علویتوضیحات علی علویتوضیحات مصطفیتوضیحات علی علویتوضیحات علی علویتوضیحات مصطفیتوضیحات مصطفیتوضیحات علی علویتوضیحات مصطفیتوضیحات مصطفی

我只有两个数组元素：

{'JobTitle': 'a', 'jobName': 'b', ...}, {'JobTitle': 'a', 'jobName': 'c', ...}

在我的回复中（浏览器的Inspect Elements）是对的。正如@memo所问，我的HTML是：

<div class="row" id="show">
            <div class="cell" id="jobtitle"></div>
            <div class="cell" id="jobname"></div>
            <div class="cell" id="fullname"></div>
            <div class="cell" id="phone"></div>
            <div class="cell" id="mail"></div>
            <div class="cell" id="city"></div>
            <div class="cell" id="description"></div>
        </div>

是的@ Z.Alpha，如果我不使用追加，它会打印最后一行。

Answer 1

请参阅此示例，这将有所帮助

＆＃13;

var data = {
  "id": "0001",
  "type": "donut",
  "name": "Cake",
  "ppu": 0.55
}


$.each(data, function() {
  console.log(data);
  console.log(data.id);
  console.log(data.type);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 2

您应该使用.append()而不是.html()，因为.html()将替换先前的值/数据，然后将最后一个值作为迭代停止。所以最后，最终会得到最后的价值。使用以下代码：

收到的数据应该是这样的形式：

var msg = [{'JobTitle': 'a','jobName': 'b'}, { 'JobTitle': 'a','jobName':'c'}];

js 应为：

$.each(msg, function(i, e){
   // one more things, as you use .each
   // then use its 2 argument `e`, to access the properties
   // otherwise use for loop if you want to use 
   // like msg[cnt]
   $('#jobtitle').append("<div>" + e.jobTitle + "</div>");
   $('#jobname').append(e.jobName);
   // same goes the other
   ........
});

这是DEMO

Answer 3

因为您每次更改 HTML 。

$('#jobtitle').append("<div>" + msg[cnt].jobTitle + "</div>");

此代码将Html设置为该值，然后在下一次迭代中将其替换为另一个代码，因此您只能看到最后一个代码。

和您可以删除cnt变量并按照这样写

$.each( msg, function( key, value ) {

    $('#jobtitle').append("<div>" + value.jobTitle + "</div>");
    $('#jobname').append(value.jobName);
    $('#fullname').append(value.fullName);
    $('#phone').append(value.phone);
    $('#mail').append(value.mail);
    $('#city').append(value.city);
    $('#description').append(value.description);

});

其中key是您的索引，如0,1,2而value是您当前的项目。

见文件
http://api.jquery.com/jquery.each/
http://api.jquery.com/html/

迭代一个数组

为什么我不能打印两行结果？它只打印一行。

3 个答案: