Javascript 无法通过onclick加载html表_Javascript_Html_Sql

Javascript 无法通过onclick加载html表

javascript html sql

Javascript 无法通过onclick加载html表,javascript,html,sql,Javascript,Html,Sql,我有一个函数，它加载一个带有sql数据查询的html表，并在我单击按钮时显示一个html页面以显示该表，但它不显示该表，它只显示url更改以匹配我的搜索，但不显示该表功能代码： function Search() { var search = new Object; search.restaurantName = document.getElementById("searchinput").value; //get input var searchrestaurant = n

我有一个函数，它加载一个带有sql数据查询的html表，并在我单击按钮时显示一个html页面以显示该表，但它不显示该表，它只显示url更改以匹配我的搜索，但不显示该表功能代码：

function Search()
{
    var search = new Object;
    search.restaurantName = document.getElementById("searchinput").value; //get input

var searchrestaurant = new XMLHttpRequest();
searchrestaurant.open("POST", Search_url, true);
searchrestaurant.setRequestHeader("Content-Type", "application/json");

searchrestaurant.onload = function() 
{

    search_array = JSON.parse(request.responseText);
    result();


}

searchrestaurant.send(JSON.stringify(search));



}



function result()
{
    var table = document.getElementById("result"); 
        table.innerHTML = "";

    result = search_array.length

for (var count = 0; count < result; count++)
{
    // data from sql
    var restaurant_name = search_array[count].restaurant_name;
    var Description = search_array[count].Description;
    var location = search_array[count].location;
    var thumbnail = search_array[count].thumbnail;
    var price = search_array[count].price;
    var rating = search_array[count].avg_rating;


    //table to show all sql data
    var AllrestaurantTable = "<table class = fixed style=width:100% border=1px>" +

                                "<tr>"+
                                    "<td>" +"<a href = 'detailed_restaurant.html' target ='_blank'>"+"<img src ='" + thumbnail + "'style=width:100px;height:100px;></img>"+"</td>" +
                                    "<td>"+"<a href = 'detailed_restaurant.html' target ='_blank'>"+ restaurant_name  + "</td>" +
                                    "<td>"+ location + "</td>" +
                                    "<td>"+ Description + "</td>" +
                                    "<td>"+ price + "</td>" +
                                    "<td>"+ rating + "</td>"

                                "</tr>" +
                            "</table>";



    table.insertAdjacentHTML('beforeend', AllrestaurantTable);


 }
   }

函数搜索（）
{
var搜索=新对象；
search.restaurantName=document.getElementById（“searchinput”）.value；//获取输入
var searchrestaurant=new-XMLHttpRequest（）；
searchrestaurant.open（“POST”，搜索url，true）；
setRequestHeader（“内容类型”、“应用程序/json”）；
searchrestaurant.onload=函数（）
{
search\u array=JSON.parse（request.responseText）；
结果（）；
}
searchrestaurant.send（JSON.stringify（search））；
}
函数结果（）
{
var table=document.getElementById（“结果”）；
table.innerHTML=“”；
结果=搜索\数组长度
对于（变量计数=0；计数<结果；计数++）
{
//来自sql的数据
var restaurant\u name=搜索数组[count]。restaurant\u name；
var Description=搜索数组[count]。Description；
var location=search_数组[count]。位置；
var thumbnail=搜索数组[count]。缩略图；
var price=search_数组[count]。price；
var评级=搜索数组[count]。平均评级；
//表以显示所有sql数据
var allrestaurantable=“”+
""+
"" +""+""+"" +
“”+“”+餐厅名称+“”+
“”+位置+“”+
“”+说明+“”+
“”+价格+“”+
“”+评级+“”
"" +
"";
表.insertAdjacentHTML（'beforeend'，AllrestaurantTable）；
}
}

Html:


搜寻

我已经将脚本加载到html站点中，但它只是接受我的输入，不显示我创建的表。

在

“”+rating+“”

之后缺少连接运算符

添加

运算符。比如

“+评级+”

++

函数结果（）{
var table=document.getElementById（“结果”）；
table.innerHTML=“”；
结果=5
对于（变量计数=0；计数<结果；计数++）{
//来自sql的数据
var\u name=1；
变量说明='ddf'；
变量位置='位置'；
var=1；
var价格=‘价格’；
风险值评级=‘评级’；
//表以显示所有sql数据
var allrestaurantable=“”+
"" +
"" + "" + "" + "" +
“”+“”+餐厅名称+“”+
“”+位置+“”+
“”+说明+“”+
“”+价格+“”+
“”+评级+“”+
"" +
"";
表.insertAdjacentHTML（'beforeend'，AllrestaurantTable）；
}
}
结果（）

评级后+
缺失td
这就是为什么它没有在屏幕上打印，请立即尝试感谢您的帮助，但操作员不是问题所在，表格仍然没有显示以上代码，我只将变量值更改为一些静态值，它正在工作。它可以工作，但当我尝试将其放入网页时，即使我有数据，它仍然显示为空。可能是document.getElementById（“searchinput”）.value；是否有问题？请检查结果
和搜索数组
<body>
<form id = "SearchForm">
    <label>Search </label>
    <input type="text" id="searchinput" name="restaurantName">
    <input type="button" onclick="Search()" value="Submit">
</form>

<div class="container"></div>


    <div id="result" class="row"></div>

     </div>