Question

我的代码有一个奇怪的问题我似乎无法弄清楚。我对js相对较新，并利用http请求来检索json数据，但是我已经能够提出有效的代码。

本质上工作流程如下：我让用户输入一些表单字段值并选择提交按钮。提交apiCall()函数，然后调用createXMLHttpRequestObject()和constructApiURL(searchtype)函数创建，填充并通过代理将xmlHttpRequest对象发送到搜索API。返回结果后，将调用handleResults()函数，然后使用div函数解析并在适当的handleResultsContainer()容器中显示结果。

当我通过firebug逐步完成代码时，一切正常。创建对象，通过代理发送到搜索API，返回并显示结果，但一旦焦点返回到函数onsubmit(event) {callApi();}，内容就会清除！？！我不知道该页面是否已重新加载或其他内容正在进行中。

现在，如果我将表单提交的初始触发器更改为按钮，则可以正常工作。用户选择按钮，检索并显示搜索结果，直到用户再次选择按钮，此时结果被清除并显示新结果。问题是我必须硬编码我通常从表单中获得的参数。

有没有人经历过这个或者看到浏览器读取代码的方式可能会导致这种情况？我的伪代码如下。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript"> 
function createXMLHttpRequestObject() { 
-- code to create the XMLHttpRequestObject based on browser type --
} 

function constructApiURL(searchtype) { 
-- code to create the api url using the form values & proxy url --
} 

function handleResultsContainer () { 
-- code to create/remove search results display div
} 

function handleResults(jsndata) { 
-- code to parse and display results here --
} 

function callApi() { 
-- code to create XMLHttpRequestObject, populate it, and send it --
} 

</script> 
</head> 
<body>

<form id="basicform" name="mashsearch" onsubmit="callApi()"> 
     -- Code for user input fields which are then used by constructApiURL --
     <input type="submit" id="searchbtn" value="Search!"/> 
</form> 

//Div displaying a Search Results Loading… message which is hidden/displayed//
<div id='loadingDiv' style="display:none">Search Results Loading...</div> 

//Div used to display the search results
<div id='json'></div> 
</body> 
</html>

Answer 1

将您的onsubmit更改为：

onsubmit="callApi();return false;"

或者，您可以将return false添加到callApi()方法的底部，并将您的onsubmit更改为onsubmit="return callApi()"

如果您不这样，页面将按正常行为提交和重新加载。

形式onsubmit和javascript xmlhttprequest的奇怪问题

1 个答案: