我正在编写一个简单的Web服务,并且在Web UI上(url是“localhost:9001”),有一个触发函数indexIt
的按钮,它引发一个POST请求,服务器用json响应。
<button type="submit" id="indexButton" class="btn btn-primary" onclick="indexIt()">Index</button>
相关代码是:
function displayResponse(msg) {
var shown = JSON.stringify(msg, null, 2);
$(hintTextSelector).text(shown);
}
function indexDoneHint(response) {
console.log(JSON.stringify(response));
displayResponse(response);
}
function getLOptions() {
return {
"stem": $("#cb-index-stem").is(":checked"),
"ignore": $("#cb-index-ignore").is(":checked"),
"swDict": $("#lb-index-stopwords").val()
}
}
function indexIt() {
var indexOptions = getLOptions();
var privateParam = {
"method": "POST",
"url": _getUrl("indexDoc"),
"data": JSON.stringify(indexOptions)
};
$.extend(privateParam, commonParam);
$.ajax(privateParam).done(indexDoneHint).error(onError);
}
问题是,当我按下按钮触发请求时,网址将更改为“localhost:9001 /?” (尾随/?
)已添加。
奇怪的是,当我使用开发者控制台并调用indexIt()
时,页面仍为“localhost:9001”
答案 0 :(得分:1)
只需将按钮设为简单按钮而不是提交按钮,键入=&#34;按钮&#34;
<button type="button" id="indexButton" class="btn btn-primary" onclick="indexIt()">Index</button>
OR
<input type="button" id="indexButton" class="btn btn-primary" onclick="indexIt()">Index</button>
因为当您将按钮设置为提交时,它会将您的页面提交给使用Form标签编写的操作。
答案 1 :(得分:1)
如果您在表单中使用按钮<button>
,则点击它会自动提交表单。
而不是按钮标签使用输入标签,即
<input type="button" id="indexButton" class="btn btn-primary" onclick="indexIt()" value="Index It" />
或使用return keyword
<button type="submit" id="indexButton" class="btn btn-primary"
onclick="return indexIt()" >Index</button>
在你的javascript函数“indexIt()”中最后使用“return false”,这样它就会运行你的js代码并停止执行。
function indexIt() {
var indexOptions = getLOptions();
var privateParam = {
"method": "POST",
"url": _getUrl("indexDoc"),
"data": JSON.stringify(indexOptions)
};
$.extend(privateParam, commonParam);
$.ajax(privateParam).done(indexDoneHint).error(onError);
return false;
}