0

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

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

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

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

有没有人遇到过这种情况或看到浏览器如何读取代码可能导致这种情况？我的伪代码如下。

<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>
4

1 回答 1

0

将您的 onsubmit 更改为：

onsubmit="callApi();return false;"

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

如果您不这样做，页面将像正常行为一样提交并重新加载。

于 2012-01-27T15:04:52.090 回答