Javascript gettin ReferenceError：在使用ajax调用时未定义函数-在没有ajax调用的情况下可以正常工作
我在index.html中有以下代码（为了简洁起见删除了很多代码） 当我从getConcepts函数中删除Ajax调用时，我没有得到任何错误，所有控制台日志语句都显示在控制台中 然而，当我尝试使用Ajax调用调用getConcepts函数时，我总是得到 ReferenceError:getConcepts未定义索引。html:1:1为什么Javascript gettin ReferenceError：在使用ajax调用时未定义函数-在没有ajax调用的情况下可以正常工作,javascript,jquery,ajax,Javascript,Jquery,Ajax,我在index.html中有以下代码（为了简洁起见删除了很多代码） 当我从getConcepts函数中删除Ajax调用时，我没有得到任何错误，所有控制台日志语句都显示在控制台中 然而，当我尝试使用Ajax调用调用getConcepts函数时，我总是得到 ReferenceError:getConcepts未定义索引。html:1:1为什么 <script type="text/javascript"> function getConcepts() {
<script type="text/javascript">
function getConcepts() {
console.log("Title of Research Project inside index.html");
var project_title = $("#projectTitleId").val();
console.log(project_title);
console.log("Description of Research Project inside index.html");
var project_description = $("#descriptionId").val();
console.log(project_description);
var intendedUse = sessionStorage.getItem("selectedIntendedUse");
console.log("Intended Use inside index.html");
console.log(intendedUse);
$.ajax({
type: "Post",
url: "http://localhost:8080/Datagetter/datagetter",
data:{
p_in_user_id: 'JACK',
p_in_user_application:'MyAPP',
personnel_id='12345'
},
async: true,
cache: false,
success: function(data) {
console.log("Inside success of datagetter endpoint");
console.log(data);
};
});
}
else {
}
}
}
</script>
</head>
<body>
<div id="wrapper">
<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
</div>
<!-- /#wrapper -->
</script>
</body>
</html>
函数getConcepts（）{
log（“index.html内部研究项目的标题”）；
var project_title=$（“#projectTitleId”）.val（）；
控制台日志（项目名称）；
log（“index.html中的研究项目描述”）；
var project_description=$（“#descriptionId”）.val（）；
控制台日志（项目描述）；
var intendedUse=sessionStorage.getItem（“selectedEndeduse”）；
log（“index.html中的预期用途”）；
console.log（intendedUse）；
$.ajax({
类型：“Post”，
url:“http://localhost:8080/Datagetter/datagetter",
数据：{
p_in_user_id:'JACK'，
用户应用程序中的p_:“MyAPP”，
人员_id='12345'
},
async:true，
cache:false，
成功：功能（数据）{
log（“datagetter端点内部成功”）；
控制台日志（数据）；
};
});
}
否则{
}
}
}
请求数据
函数getConcepts（）{
警惕（“yo”）；
/*$.ajax({
类型：“Post”，
url:“http://localhost:8080/Datagetter/datagetter",
数据：{
p_in_user_id:'JACK'，
用户应用程序中的p_:“MyAPP”，
人员_id='12345'
},
async:true，
cache:false，
成功：功能（数据）{
log（“datagetter端点内部成功”）；
控制台日志（数据）；
};
});*/
}
数据获取错误！
研究项目说明：
您的研究项目名称：
预期用途：
请选择一个
第一
第二
第三
智能搜索的div
请求数据
//当文档“准备就绪”时初始化函数
$（文档）.ready（函数（）{
//开始表单验证
$（'#validateForm'）。bootstrapValidator({
反馈图标：{
有效：“glyphicon glyphicon ok”，
无效：“glyphicon glyphicon删除”，
正在验证：“glyphicon glyphicon刷新”
},
字段：{
桌面集：{
验证器：{
注意：{
信息：“请选择一套办公桌”
}
}
},
研究项目的标题：{
验证器：{
弦长：{
民:5,，
消息：“请输入至少5个字母长度的标题”
},
注意：{
消息：“请输入项目的标题”
}
}
},
描述Fresearch项目：{
验证器：{
弦长：{
分钟:15,，
最高：100，
消息：“请输入至少15个字符，但不超过100”
},
注意：{
消息：“请输入说明”
}
}
},
意图推断：{
验证器：{
注意：{
消息：“请选择一个选项”
}
}
},
}
});
//结束形式验证
});
//结束形式验证
ReferenceError:g
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" >
<link rel="stylesheet" href="js/style.css"/>
<link href="js/jquery.growl.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script type="text/javascript">
function getConcepts() {
alert ("yo");
/*$.ajax({
type: "Post",
url: "http://localhost:8080/Datagetter/datagetter",
data:{
p_in_user_id: 'JACK',
p_in_user_application:'MyAPP',
personnel_id='12345'
},
async: true,
cache: false,
success: function(data) {
console.log("Inside success of datagetter endpoint");
console.log(data);
};
});*/
}
</script>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" >
<img src="images/test.png" width = "210px" height = "50px" >
</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" ></a>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row" id="main" >
<div class="col-sm-12 col-md-12 well " style="padding:0px;" id="content">
<h3>Data Getterr!</h3>
</div>
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm" method="POST" onsubmit="return false">
<div class="row">
<div class="col-md-offset-1 col-md-4">
<!--<div class="form-group">
<label class="control-label">Select your desk sets:</label>
<select id = "deskSetlist" name="deskSets" class="form-control" >
<option value=" " >Please select desk set</option>
<option value=" " >test1</option>
<option value=" " >test2</option>
</select>
</div>-->
<div class="form-group">
<label class="control-label">Description of research project:</label>
<textarea class="form-control" id = "descriptionId"name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
</div>
</div>
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Title of your research project:</label>
<input id = "projectTitleId" name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text">
</div>
<div class="form-group">
<label class="control-label">Intended use:</label>
<select id="intendedUseList" name="intendedUse" class="form-control" >
<option value=" " >Please select one</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
</div>
<!--<div class="form-group">
<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
</div>-->
</div>
</div>
<div class="row" id="smartSearchDisp" style= "margin-top: 25px;">
<p>A div for smart search!</p>
</div>
<button class="btn btn-success" id="conceptsButton" onclick="getConcepts()">Request Data</button>
<!--<button class="btn btn-success" id="conceptsButton" >Request Data</button>-->
</form>
<!-- END form testing-->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div><!-- /#wrapper -->
<!-- <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="js/bundle.js"></script>
<script type="text/javascript" src="js/downloader.js"></script>
<script type="text/javascript" src="js/jquery.growl.js"></script>
<script type="text/javascript">
//Initialize function when document 'is ready'
$(document).ready(function() {
//BEGIN FORM Validations
$('#validateForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
deskSets: {
validators: {
notEmpty: {
message: 'Please select a desk set'
}
}
},
titleOfResearchProject: {
validators: {
stringLength: {
min: 5,
message: 'Please Enter the title with minimum 5 letters length'
},
notEmpty: {
message: 'Please Enter title of your project'
}
}
},
descriptionOfResearchProject: {
validators: {
stringLength: {
min: 15,
max: 100,
message: 'Please enter at least 15 characters and no more than 100'
},
notEmpty: {
message: 'Please Enter Description'
}
}
},
intendedUse: {
validators: {
notEmpty: {
message: 'Please select one option'
}
}
},
}
});
//END FORM Validations
});
//END FORM Validations
</script>
</body>
</html>