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

我试图通过单击表格行（在点击行时将行值传递给按钮）或通过在文本框中输入变量并按下按钮来使用Ajax从文件中获取数据。 但它似乎没有起作用。（ 请不要因为我是C ++程序员和学习Web开发而投票。 ）

     
 
 
 
ID
 
Value
 
Name
 
Cell #
 
Nickname
 
 
 
 
 
2
 
54235
 
Benjamin Lloyd
 
(801) 123-456
 
Ben
 
 
 
2
 
44235
 
XXXXXX
 
642363673
 
TRE
 
 
 
 
 
 
ID:
 
Value:
 
 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. 
Submit
 
   $(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); };    

cat Data_2_54235.txt

 Nice Work! Your code is working with first file. 

cat Data_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很重要。

您可以看到没有不必要的数据参数被抛出到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'); } }); }); 

事件处理程序的示例单击

 $("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'); } }); });