gpt4 book ai didi

javascript - HTML 按钮点击似乎调用了错误的函数

转载 作者:行者123 更新时间:2023-12-02 20:57:12 25 4
gpt4 key购买 nike

我正在使用 bootstrap 开发一个 Web UI,它调用后端 Java Web 服务来从数据库检索数据并将其显示在表中。我有一个这样调用的函数:

<body onload="refreshVOI()">

这正在按预期工作。但是,我还有一个搜索按钮,可以使用搜索值作为参数发出另一个请求。但出于某种原因,似乎这个按钮点击再次调用了refreshVOI()。请参阅下面的片段:

/* 
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var voiDataArray = [];

function makeHttpObject() {
try {
return new XMLHttpRequest();
} catch (error) {
alert("error");
}
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (error) {
alert("error");
}
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (error) {
alert("error");
}
throw new Error("Could not create HTTP request object.");
}

function refreshVOI() {
// Find a <table> element with id="VOITable":
var VOITable = document.getElementById("VOITable");
var tableRows = VOITable.getElementsByTagName('tr');
var rowCount = VOITable.rows.length;
console.log("Getting all alerts...");
for (var r = 1; r < rowCount; r++) {
VOITable.deleteRow(-1);
}

var request = makeHttpObject();
var xmlDoc;
var parser;
var x, i;
var vois, voi;
request.open("GET", "http://localhost:8080/VehiclesOfInterestWebServices/webresources/model.vehicleofinterest", true);
request.send();
request.onreadystatechange = function () {

if (request.readyState == 4)
{
console.log("data " + request.responseText.toString());
parser = new DOMParser();
vois = parser.parseFromString(request.responseText.toString(), "text/xml");
voi = vois.documentElement.childNodes;

for (i = 0; i < voi.length; i++)
{
var row = VOITable.insertRow(-1);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);

// Add some text to the new cells:
cell1.innerHTML = vois.getElementsByTagName("licensePlate")[i].childNodes[0].nodeValue;
cell2.innerHTML = vois.getElementsByTagName("reason")[(i * 2) + 1].childNodes[0].nodeValue;
cell3.innerHTML = vois.getElementsByTagName("make")[(i * 4) + 1].childNodes[0].nodeValue;
cell4.innerHTML = vois.getElementsByTagName("model")[(i * 2) + 1].childNodes[0].nodeValue;
cell5.innerHTML = vois.getElementsByTagName("vehYear")[i].childNodes[0].nodeValue;
cell6.innerHTML = vois.getElementsByTagName("color")[i].childNodes[0].nodeValue;
cell7.innerHTML = vois.getElementsByTagName("ownersName")[i].childNodes[0].nodeValue;
cell8.innerHTML = vois.getElementsByTagName("ownersPhone")[i].childNodes[0].nodeValue;
} // end of for loop
} // end of if statement
request.close();

}; // end of fucntion
} // end of refreshSales function

function searchVOI(search_val) {
if (search_val.length > 0) {
var form = document.getElementById('myInput');
var search_val = form.elements.searchfield.value;
console.log("Searching for VOI by license plate: " + search_val);
// Find a <table> element with id="VOITable":
var VOITable = document.getElementById("VOITable");
var tableRows = VOITable.getElementsByTagName('tr');
var rowCount = VOITable.rows.length;
console.log("get table");
for (var r = 1; r < rowCount; r++) {
VOITable.deleteRow(-1);
}

var request = makeHttpObject();
var xmlDoc;
var parser;
var x, i;
var vois, voi;
request.open("GET", "http://localhost:8080/VehiclesOfInterestWebServices/webresources/model.vehicleofinterest"+search_val, true);
request.send();
request.onreadystatechange = function () {

if (request.readyState == 4)
{
console.log("data " + request.responseText.toString());
parser = new DOMParser();
vois = parser.parseFromString(request.responseText.toString(), "text/xml");
voi = vois.documentElement.childNodes;

for (i = 0; i < voi.length; i++)
{
var row = VOITable.insertRow(-1);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);

// Add some text to the new cells:
cell1.innerHTML = vois.getElementsByTagName("licensePlate")[i].childNodes[0].nodeValue;
cell2.innerHTML = vois.getElementsByTagName("reason")[(i * 2) + 1].childNodes[0].nodeValue;
cell3.innerHTML = vois.getElementsByTagName("make")[(i * 4) + 1].childNodes[0].nodeValue;
cell4.innerHTML = vois.getElementsByTagName("model")[(i * 2) + 1].childNodes[0].nodeValue;
cell5.innerHTML = vois.getElementsByTagName("vehYear")[i].childNodes[0].nodeValue;
cell6.innerHTML = vois.getElementsByTagName("color")[i].childNodes[0].nodeValue;
cell7.innerHTML = vois.getElementsByTagName("ownersName")[i].childNodes[0].nodeValue;
cell8.innerHTML = vois.getElementsByTagName("ownersPhone")[i].childNodes[0].nodeValue;
} // end of for loop
} // end of if statement
request.close();
}; // end of fucntion
}
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Apr 20, 2020, 9:37:46 PM
Author : ryan
*/

body {
padding: 0;
margin: 0;
background: #212121;
color: #f5f5f5;
}
.table-dark {
background: #212121;
}
.navbar {
background: #424242;
}
.form-control {
background: #424242;
border: none;
color: #212121;
}
.d-flex {
margin-left: 10%;
margin-right: 10%;
}
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Vehicles of Interest</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon"
type="image/png"
href="assets/mdgov-fav-icon.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="vehiclesOfInterest.js"></script>
<link rel="stylesheet" type="text/css" href="main.css"
</head>

<body onload="refreshVOI()">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<img src="./assets/mdgov-fav-icon.png" class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" style="font-size: x-large">Dashboard<span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input id="myInput" class="form-control form-control-md" type="search" placeholder="Search alerts..." aria-label="Search">
<button id="searchBtn" onclick="searchVOI()" class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

<br>
<div class='d-flex justify-content-between'>
<div>
<h2>Active Alerts</h2>
</div>
<div>
<div class='btn-group'>
<button onclick="refreshVOI()" type='button' class='btn btn-info'>Refresh</button>
</div>
</div>
</div>
<br>
<div class ="container container-fluid">
<table class="table table-hover table-dark table-borderless" id="VOITable">
<thead>
<tr>
<th>License Plate</th>
<th>Reason</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
<th>Color</th>
<th>Owner</th>
<th>Owner Phone</th>
</tr>
</thead>
<tbody id="myTable" />
</table>
</div->
</body>
</html>

出于某种原因,该页面似乎只是像以前一样刷新并加载所有数据。我根本没有看到来自 searchVOI() 的日志消息显示在控制台中。我想知道是否在单击按钮时以某种方式调用了refreshVOI()并覆盖搜索结果。

任何帮助将不胜感激!!!

最佳答案

您的问题与搜索按钮点击时的页面刷新有关,因为它是一个提交类型按钮,因为您正在调用它的函数,所以您需要使其按钮类型=“按钮”不提交,只需检查是否这样就是你想要的。

/* 
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var voiDataArray = [];

function makeHttpObject() {
try {
return new XMLHttpRequest();
} catch (error) {
alert("error");
}
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (error) {
alert("error");
}
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (error) {
alert("error");
}
throw new Error("Could not create HTTP request object.");
}

function refreshVOI() {
// Find a <table> element with id="VOITable":
var VOITable = document.getElementById("VOITable");
var tableRows = VOITable.getElementsByTagName('tr');
var rowCount = VOITable.rows.length;
console.log("Getting all alerts...");
for (var r = 1; r < rowCount; r++) {
VOITable.deleteRow(-1);
}

var request = makeHttpObject();
var xmlDoc;
var parser;
var x, i;
var vois, voi;
request.open("GET", "http://localhost:8080/VehiclesOfInterestWebServices/webresources/model.vehicleofinterest", true);
request.send();
request.onreadystatechange = function () {

if (request.readyState == 4)
{
console.log("data " + request.responseText.toString());
parser = new DOMParser();
vois = parser.parseFromString(request.responseText.toString(), "text/xml");
voi = vois.documentElement.childNodes;

for (i = 0; i < voi.length; i++)
{
var row = VOITable.insertRow(-1);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);

// Add some text to the new cells:
cell1.innerHTML = vois.getElementsByTagName("licensePlate")[i].childNodes[0].nodeValue;
cell2.innerHTML = vois.getElementsByTagName("reason")[(i * 2) + 1].childNodes[0].nodeValue;
cell3.innerHTML = vois.getElementsByTagName("make")[(i * 4) + 1].childNodes[0].nodeValue;
cell4.innerHTML = vois.getElementsByTagName("model")[(i * 2) + 1].childNodes[0].nodeValue;
cell5.innerHTML = vois.getElementsByTagName("vehYear")[i].childNodes[0].nodeValue;
cell6.innerHTML = vois.getElementsByTagName("color")[i].childNodes[0].nodeValue;
cell7.innerHTML = vois.getElementsByTagName("ownersName")[i].childNodes[0].nodeValue;
cell8.innerHTML = vois.getElementsByTagName("ownersPhone")[i].childNodes[0].nodeValue;
} // end of for loop
} // end of if statement
request.close();

}; // end of fucntion
} // end of refreshSales function

function searchVOI(search_val) {
if (search_val.length > 0) {
var form = document.getElementById('myInput');
var search_val = form.elements.searchfield.value;
console.log("Searching for VOI by license plate: " + search_val);
// Find a <table> element with id="VOITable":
var VOITable = document.getElementById("VOITable");
var tableRows = VOITable.getElementsByTagName('tr');
var rowCount = VOITable.rows.length;
console.log("get table");
for (var r = 1; r < rowCount; r++) {
VOITable.deleteRow(-1);
}

var request = makeHttpObject();
var xmlDoc;
var parser;
var x, i;
var vois, voi;
request.open("GET", "http://localhost:8080/VehiclesOfInterestWebServices/webresources/model.vehicleofinterest"+search_val, true);
request.send();
request.onreadystatechange = function () {

if (request.readyState == 4)
{
console.log("data " + request.responseText.toString());
parser = new DOMParser();
vois = parser.parseFromString(request.responseText.toString(), "text/xml");
voi = vois.documentElement.childNodes;

for (i = 0; i < voi.length; i++)
{
var row = VOITable.insertRow(-1);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);

// Add some text to the new cells:
cell1.innerHTML = vois.getElementsByTagName("licensePlate")[i].childNodes[0].nodeValue;
cell2.innerHTML = vois.getElementsByTagName("reason")[(i * 2) + 1].childNodes[0].nodeValue;
cell3.innerHTML = vois.getElementsByTagName("make")[(i * 4) + 1].childNodes[0].nodeValue;
cell4.innerHTML = vois.getElementsByTagName("model")[(i * 2) + 1].childNodes[0].nodeValue;
cell5.innerHTML = vois.getElementsByTagName("vehYear")[i].childNodes[0].nodeValue;
cell6.innerHTML = vois.getElementsByTagName("color")[i].childNodes[0].nodeValue;
cell7.innerHTML = vois.getElementsByTagName("ownersName")[i].childNodes[0].nodeValue;
cell8.innerHTML = vois.getElementsByTagName("ownersPhone")[i].childNodes[0].nodeValue;
} // end of for loop
} // end of if statement
request.close();
}; // end of fucntion
}
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Apr 20, 2020, 9:37:46 PM
Author : ryan
*/

body {
padding: 0;
margin: 0;
background: #212121;
color: #f5f5f5;
}
.table-dark {
background: #212121;
}
.navbar {
background: #424242;
}
.form-control {
background: #424242;
border: none;
color: #212121;
}
.d-flex {
margin-left: 10%;
margin-right: 10%;
}
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Vehicles of Interest</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon"
type="image/png"
href="assets/mdgov-fav-icon.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="vehiclesOfInterest.js"></script>
<link rel="stylesheet" type="text/css" href="main.css"
</head>

<body onload="refreshVOI()">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<img src="./assets/mdgov-fav-icon.png" class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" style="font-size: x-large">Dashboard<span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input id="myInput" class="form-control form-control-md" type="search" placeholder="Search alerts..." aria-label="Search">
<button id="searchBtn" onclick="searchVOI()" class="btn btn-outline-info my-2 my-sm-0" type="button">Search</button>
</form>
</div>
</nav>

<br>
<div class='d-flex justify-content-between'>
<div>
<h2>Active Alerts</h2>
</div>
<div>
<div class='btn-group'>
<button onclick="refreshVOI()" type='button' class='btn btn-info'>Refresh</button>
</div>
</div>
</div>
<br>
<div class ="container container-fluid">
<table class="table table-hover table-dark table-borderless" id="VOITable">
<thead>
<tr>
<th>License Plate</th>
<th>Reason</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
<th>Color</th>
<th>Owner</th>
<th>Owner Phone</th>
</tr>
</thead>
<tbody id="myTable" />
</table>
</div->
</body>
</html>

关于javascript - HTML 按钮点击似乎调用了错误的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61444529/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com