如何使用ajax将检索到的数据分配给不同的td

时间:2013-11-28 09:41:52

标签: javascript php ajax jquery

当用户按下按钮时,数据将保存到数据库中。成功后我想从数据库中检索数据并将其放在正确的td中(在点击的td的同一行中)我成功检索数据但不是将检索到的数据分配给不同的td

ajax

$(document).ready(function(){

        $('.edit2').on('click', function(){


         arr = $(this).attr('class').split( " " );
        var clientid=document.getElementById("client").value;

        $.ajax({    type: "POST",
        url:"clientnetworkpricelist/updateprice.php", 
        data: "value="+$('.ajax input').val()+"&rowid="+arr[2]+"&field="+arr[1]+"&clientid="+clientid,
        success: function(data){
                            $('#CPH_GridView1_clientprice'+arr[2]).empty();
                            $('#CPH_GridView1_clientprice'+arr[2]).append(data);                                                             
                            $('.ajax').html($(this).val());
                            $('.ajax').removeClass('ajax');
                                }});

                                  }  
                             );
                        });

HTML

<td  id="CPH_GridView1_clientprice'.$rows['net_id'].'" class="edit clientprice '.$rows["net_id"].'">'.$rows["clientprice"].'</td>
 <td  id="CPH_GridView1_Status'.$rows['net_id'].'" class="edit2 status '.$rows["net_id"].' "><img  src="image/'.$rows["status"].'f.png" /></td>

在我的updateprice.php中,我连接到数据库并从数据库中检索值,只需打印检索值,就像这样

print $newclientprice;

   print $status;

我的结果

这两个值现在都显示在同一个td中,但我希望它在clientprice的单独td 0/01中并且状态增加

Client Price      status
 0.01increase    |
                 |
                 |

任何人都帮助我。

1 个答案:

答案 0 :(得分:1)

updateprice.php

让我们改变一下:

<?php
print $newclientprice;
print $status;

我不确定你要做什么。因为您使用的是jQuery,所以让我们使用JSON来获益。 重要提示:以下代码依赖于无输出在执行之前发送,它将立即完成php执行

<?php
// set type so client can understand what was sent
header('Content-Type: application/json');
// transform our 2 values into a JSON array,
// this will be transparently transformed into an array for your ajax handler
echo json_encode(array($newclientprice, $status));
// end the script, this is what the client ajax request wanted
exit;

javascript.js

我冒昧地重写你的代码,以便它看起来更清晰,至少还有一些评论

$(document).ready(function(){
  var onClick, ajaxSuccessHandleMaker;
  onClick = function() {
    var
      url = 'clientnetworkpricelist/updateprice.php',
      clientid = $('#client')[0].value,
      classesArray = $(this).attr('class').split(" "),
      // send data as object, jQuery will transparently transform for the server
      data = {
        value : $('.ajax input').val,
        rowid : classesArray[2],
        field : classesArray[1],
        clientid : clientid
      };
    // send POST request and expect JSON
    $.post(url,data,ajaxSuccessHandleMaker(classesArray),'json');
  };
  // success returns the ajax handler with a closure on classesArray
  ajaxSuccessHandleMaker = function (arr) {
    // the handler EXPECTS an array, which is why we have to protect output in updateprice.php
    return function (arrayOf2vals) {
      $('#CPH_GridView1_clientprice'+arr[2]).html(arrayOf2vals[0]);
      $('#CPH_GridView1_Status'+arr[2]).html(arrayOf2vals[1]);
      // I am not sure what you want with the following 2 lines of code
      $('.ajax').html($(this).val());// what is this?
      $('.ajax').removeClass('ajax');// what is this?
    };
  };
  // set the onClick handler
  $('.edit2').click(onClick);
});

最后

  • 欢迎任何问题
  • 请测试它是否有效,如果没有则再回复,我会尽力帮助