javascript - 从动态创建的表中进行 Ajax 发布

Question

这里是ajax新手。我试图将一些数据发布到我的服务器上的 php 文件中，但是，数据没有通过。我有一个根据查询结果动态创建的表。我正在尝试使用 document.getElementById 但这不会获取我的数据(并且它不会获取我的数据，因为我猜每个动态创建的行都会具有相同的 id)我也尝试过在函数中传递变量，例如所以:

print("<tr onclick='ajax_post({$result["date"]}, {$result["work"]});'>");

在 js 函数上获取变量，如下所示:

ajax_post(a, b){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create variables to send to our PHP file
var url = "ajaxform.php";
var dt = a;
var wk = b;
var vars = "date="+dt+"&workout="+wk;
}

但这在这里不起作用。这是我的代码:

<script>
function ajax_post(){
    // Create our XMLHttpRequest object
 var hr = new XMLHttpRequest();
// Create variables to send to our PHP file
var url = "ajaxform.php";
var dt = document.getElementById("date").value;
var wk = document.getElementById("work").value;
var vars = "date="+dt+"&workout="+wk;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables       in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var return_data = hr.responseText;
        document.getElementById("status").innerHTML = return_data;
    }
}
// Send the data to PHP now... and wait for response to update the status     div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>

<p id="status"></p>

<div>
  <table class="table table-striped">  
    <thead>
      <tr>
        <th class="bold">Date</th>
        <th class="bold">Work</th>
        <th class="bold">Mood</th>              
      </tr>
    </thead>
    <tbody>      
<?php       

        foreach ($results as $result)
        {   
            print("<tr onclick='ajax_post();'>");

                print("<td class='date' id='date' name='date'  value='{$result["date"]}'>{$result["date"]}</td>");
                print("<td id='workout' name='workout' value='{$result["work"]}'>{$result["work"]}</td>");
                print("<td>{$result["mood"]}</td>");        

            print("</tr>");                

        }                     

  ?>        

  </tbody>   
 </table>    

</div>

任何帮助将不胜感激。如果用普通 js 无法做到这一点，我愿意接受 jquery 解决方案。

谢谢!!!!!!

Answer 1

我会使用$.ajax()来简化一些事情。但除此之外，您应该使用 classes 而不是 ids 来定位您的元素，因为 ids 应始终是唯一的(只有一个元素应具有该 id)而任意数量的元素可以具有相同的类。

当用户单击一行时，找到该行中所需的元素并获取它们的值，然后在 ajax 调用中发送它们。

这是一个例子:

jsFiddle

$('tr').click(function() {
  var row = $(this);
  var url = "ajaxform.php";
  var dt = row.find(".date").text();
  var wk = row.find(".work").text();
  var vars = "date=" + dt + "&workout=" + wk;
  $.ajax({
    type: "POST",
    url: url,
    data: vars,
    success: function(response) {
      // handel successs
    },
    error: function(response) {
      // handel error
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table>
    <tr>
        <td class="date">1/2/2015</td>
        <td class="work">legs</td>
    </tr>
    <tr>
        <td class="date">1/3/2015</td>
        <td class="work">arms</td>
    </tr>
    <tr>
        <td class="date">1/4/2015</td>
        <td class="work">lats</td>
    </tr>
    <tr>
        <td class="date">1/5/2015</td>
        <td class="work">calves</td>
    </tr>
    <tr>
        <td class="date">1/6/2015</td>
        <td class="work">quads</td>
    </tr>
</table>