如何在单击表行时使用Ajax从文件中获取数据

Question

我试图通过使用表的行（将行值传递给单击行的按钮）或通过在文本框中输入变量并按按钮来使用Ajax从文件中获取数据。 但这似乎不起作用。（ 因为我是C ++程序员并且正在学习Web开发，因此请不要抱怨。 ）

<!DOCTYPE html>
<html>
<body> 
 <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">         </script>

  <table bodrder=1 class='list'>
  <thead>
     <tr>
            <th class='A'>ID</th>
            <th class='B'>Value</th>
            <th class='C'>Name</th>
            <th class='D'>Cell #</th>
            <th class='E'>Nickname</th>
        </tr>
     </thead>
     <tbody>
        <tr>
            <td>2</td>
            <td>54235</td>
            <td>Benjamin Lloyd</td>
            <td>(801) 123-456</td>
            <td>Ben</td>
        </tr>
       <tr>
            <td>2</td>
            <td>44235</td>
            <td>XXXXXX</td>
            <td>642363673</td>
            <td>TRE</td>
        </tr>
    </tbody>
</table>

<div id="tabs" class="plots-tabs" style="padding-top: 10px; padding-bottom: 10px">
<table>
  <tr><td>ID:<input id="id" type="text" class="inputbox" /></td></tr>
  <tr><td>Value:<input id="value" type="text" class="inputbox" /></td></tr>
</table>

This is DIV element which will be filled by div element on clicking button or by clicking table row which also generate the event and click the button by passing values to ajax and fetchign data.
<p style="width: 100%; text-align: right;"><button type="button" id="button">Submit</button></p>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
            //here ID and value are parsed through table click event or from text box on clicking button     
     $.ajax({
             url:filename,
             data: {         
                       ID: $("input#id").val(),
                       Value: $("input#value").val()
             },
             success:function(result){
             $("#tabs").html(result);
    }});
     var filename= "Data_"+ID+"_"+Value+".txt"; 
      $("#tabs").load(filename);
  });
});

var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    if (target) {
        var cells = target.getElementsByTagName("td");
        for (var i = 0; i < 2; i++) {
            data.push(cells[i].innerHTML);
        }
    }
    alert(data);
};
</script>
</body>
</html>

猫数据_2_54235.txt

Nice Work! Your code is working with first file.

猫数据_2_44235.txt

Nice Work! Your code is working with second file.

我如何实现以上代码。

Answer 1

我看到您根据输入值生成一个文件名。 这意味着将在该文件名上进行ajax调用，这很奇怪，因为您必须使用该名称创建一个文件。

无论如何，我在代码中看不到单击表行进行ajax调用的任何地方，只将innerHTML文本保存到变量data = [] ，然后发出alert 。 但是问题不在这里（如果您不希望单击表行时进行ajax调用），而是问题在于单击按钮时正在进行的ajax调用。

第一

url:filename
var filename= "Data_"+ID+"_"+Value+".txt";

我强烈建议您不要这样做。 如果您对一个php脚本进行ajax调用，该脚本将使用filename名创建该txt文件，然后对该文件进行另一个ajax调用并获取它，则它将起作用。

第二

data: {         
  ID: $("input#id").val(),
  Value: $("input#value").val()
}

看看这里的数据，医生解释一下。 上面的代码意味着向文件名传递参数（GET参数，即x？= ...），但是因为您的文件是.txt，所以没有意义。

第三

$("#tabs").load("demo_test.txt");

这会将demo_test.txt中的文本添加到$（“＃tabs”）中，就像innerHTML或.html（）一样。 您的主机上是否有demo_test.txt？ 我想这应该工作。

只需更改您的ajax调用并以此加载调用即可。 这应该工作：

$("button").click(function() {
    $.ajax({
        url : "demo_test.txt",
        dataType: "text",
        success : function (data) {
            $("#tabs").html(data);
        }
    });
});

要单击表行，只需将事件侦听器添加到表行，然后进行ajax调用。 阅读我发送给您的链接，因为它们对于更好地了解什么是ajax很重要。

您可以看到没有不必要的data参数被抛出给ajax调用，并且我在那儿放置了dataType，这意味着我们希望文本数据能够被接收到。 如果这不起作用，则必须确保您正在localhost服务器上工作（为了使ajax起作用...），并且具有demo_test.txt，并且正确传递了URL

使用输入值从ajax获取的示例：

$("button").click(function() {
  var id = $("input#id").val();
    var value =  $("input#value").val();
  $.ajax({
    url : "Data_" + id + "_" + value + ".txt",
    dataType: "text",
    success : function (data) {
        $("#tabs").html(data);
     },
     error: function (data) {
        #("#tabs").html('No such file found on server');
     }
    });
});

事件处理程序的示例，单击<tr>

$("table tbody").on("click", "tr", function() {
  var id = $(this).find("td")[0].text(); // gets the first td of the clicked tr (this is the ID i suppose)
    var value =  $(this).find("td")[1].text(); // gets the second td of the clicked tr (this is the VALUE i suppose)
  $.ajax({
    url : "Data_" + id + "_" + value + ".txt",
    dataType: "text",
    success : function (data) {
        $("#tabs").html(data);
     },
     error: function (data) {
        #("#tabs").html('No such file found on server');
     }
    });
});

如何在单击表行时使用Ajax从文件中获取数据

问题描述

1 个解决方案

解决方案1
4 已采纳 2015-01-28 15:58:02

如何在单击表行时使用Ajax从文件中获取数据

问题描述

1 个解决方案

解决方案1 4 已采纳 2015-01-28 15:58:02

解决方案1
4 已采纳 2015-01-28 15:58:02