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>

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()
}

文件

look here解释了数据。上面的代码意味着它将传递参数（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');
     }
    });
});

事件处理程序的示例单击<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 个答案: