Fatal编程技术网
  • jquery/
  • 需要关于jQueryAjax的建议吗

需要关于jQueryAjax的建议吗

jquery ajax

需要关于jQueryAjax的建议吗,jquery,ajax,Jquery,Ajax,我想使用ajax jquery从json文件中读取数据，并将其显示为html表格。这很好。但是，我必须能够单击每行上的按钮，将每行的子节点显示为下面提到的showDetails函数的警报。我无法获取数据。相反，它在控制台中显示了一个错误“childNode.html:1未捕获引用错误：未定义mylapore 在HTMLButtonElement.onclick（childNode.html:1）“.TIA childNode.html <!DOCTYPE html> <html

我想使用ajax jquery从json文件中读取数据，并将其显示为html表格。这很好。但是，我必须能够单击每行上的按钮，将每行的子节点显示为下面提到的showDetails函数的警报。我无法获取数据。相反，它在控制台中显示了一个错误“childNode.html:1未捕获引用错误：未定义mylapore 在HTMLButtonElement.onclick（childNode.html:1）“.TIA

childNode.html

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8">  
<title>Insert title here</title>
<style>
table {
    width: 50%;
}
th {
    background: #f1f1f1;
    font-weight: bold;
    padding: 6px;
}
td {
    background: #f9f9f9;
    padding: 6px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="application/javascript">

function myFunction(){
 $.ajax({
   url: 'childNode.json',
   type: 'GET',
   contentType: 'application/json; charset=utf-8',
   dataType: 'json',
    success: function(childNode) {
        //console.log(childNode);
        var length=childNode.length;
        for (var i=0; i<length; i++) {
            //alert("hii");
            console.log(childNode[i].cityDetails.area);
            var area=childNode[i].cityDetails.area;
            alert(area);
              var row = '<tr>'
                row+= '<td>'+ childNode[i].name+ '</td>'
                row+= '<td>'+ childNode[i].age+ '</td>'
                row+= '<td>'+ childNode[i].country+ '</td>'
                row+= '<td>'+ childNode[i].state + '</td>'
                row+= '<td>'+ childNode[i].city + '</td>'
                row+= '<td><button onclick="JavaScript:showDetails('+area+');">' + 'View Details' + '</button></td>'
                row+= '</tr>';
            $('#myTable').append(row); 
        }
    },
    error: function(jqXHR, textStatus, errorThrown){
       // alert('Error: ' + textStatus + ' - ' + errorThrown);
    }
}); 
}
function showDetails(text)
{
    alert(text);
}
</script>
</head>
<body onload="myFunction();">
<table id="myTable">
    <tr>
        <th>name</th>
        <th>age</th>
        <th>country</th>
        <th>state</th>
        <th>city</th>
        <th>action</th>
    </tr>
</table>
</body>
</html>
首先请注意，您多次包含jQuery。可以删除其中一个引用

关于这个问题，这与您提供给函数的参数中的值有关，该函数需要在其周围加引号。正确的语法是：

row+=''+'查看详细信息'+''；
但是一个更好的方法是避免使用内联事件处理程序，因为它们已经过时，并且不遵循关注点分离原则，因此是一种不好的做法。请改用委派事件处理程序。因为您已经在页面中包含了jQuery，它看起来是这样的：

//模拟AJAX响应数据：
设childNode=[{
“名称”：“灌木”，
“年龄”：“31岁”，
“国家”：“印度”，
“州”：“泰米尔纳德邦”，
“城市”：“钦奈”，
“城市详情”：{
“区域”：“mylapore”，
“车站”：“基尔堡”
}
}, {
“姓名”：“阿尔沙”，
“年龄”：“31岁”，
“国家”：“印度”，
“州”：“泰米尔纳德邦”，
“城市”：“班加罗鲁”，
“城市详情”：{
“区域”：“koramangala”，
“车站”：“营地”
}
}]
//内部成功（子节点）
让html=childNode.map（n=>{
让行=“”
行+=''+n.name+''
行+=''+n.age+''
行+=''+n.国家+''号
行+=''+n.state+''
行+=''+n.城市+''
行+='查看详细信息'
行+=''；
返回行；
});
$（'#myTable'）.append（html）；
//在AJAX调用之外的某个地方：
$（'#myTable'）。在（'单击'，'.showdata'，函数（）上{
console.log（$（this.data（'area'））；
})；
表格{
宽度：50%；
}
th{
背景#f1f1；
字体大小：粗体；
填充：6px；
}
运输署{
背景#f9f9f9；
填充：6px；
}

名称
年龄
国家
状态
城市
行动
感谢您的回复。我替换了您提到的行。但是，单击按钮时显示“2childNode.html:1未捕获的语法错误：输入意外结束” 
[
    {
        "name":"shruthy",
        "age":"31",
        "country":"india",
        "state":"tamilnadu",
        "city":"chennai",
        "cityDetails":
            {
                "area":"mylapore",
                 "station":"kilpauk"
            }

    },
    {
        "name":"arsha",
        "age":"31",
        "country":"india",
        "state":"tamilnadu",
        "city":"bengaluru",
        "cityDetails":
            {
                "area":"koramangala",
                 "station":"cantonment"
            }

    }
]