2012-01-27 6 views
0

私のコードでは奇妙な問題があります。私は比較的jsに新しく、httpリクエストを利用してjsonデータを取得していますが、ほとんどの場合、動作するコードを考え出すことができました。フォームonsubmitとjavascript xmlhttprequestの奇妙な問題

基本的に、ワークフローは次のとおりです。ユーザーにいくつかのフォームフィールド値を入力させ、送信ボタンを選択させます。関数を呼び出した後、createXMLHttpRequestObject()constructApiURL(searchtype)関数を呼び出すと、xmlHttpRequestオブジェクトが作成され、プロキシ経由でsearch api urlに送信されます。結果が返されるとhandleResults()関数が呼び出され、handleResultsContainer()関数を使用して適切なdivコンテナに結果を解析して表示します。

Firebug経由でコードをステップ実行するとすべて動作します。オブジェクトが作成され、プロキシ経由で検索APIに送信され、結果が返されて表示されますが、フォーカスが関数onsubmit(event) {callApi();}に戻ったら、コンテンツはクリアされます。私はページがリロードされているのか何か他のことが起こっているのかどうかはわかりません。

フォームの初期トリガーをonclickのボタンに変更すると、問題なく動作します。ユーザーがボタンを選択すると、検索結果が検索され、ユーザーがボタンを再度選択すると結果がクリアされ、新しい結果が表示されます。問題は、通常はフォームから取得するパラメータをハードコードする必要があることです。

誰かがこれを経験したことがありますか、これを引き起こす可能性のあるブラウザによってコードがどのように読み取られているかを見ている人はいますか?私の擬似コードは以下の通りです。あなたはページが提出しますしない場合は別の方法として、あなたのcallApi()法の下にreturn falseを追加し、onsubmit="return callApi()"

であるためにあなたのonSubmitを変更することができ

onsubmit="callApi();return false;" 

<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> 
+0

あなたは送信ハンドラに '; return false;'、または 'event.preventDefault()'の記号を追加していません。 –

+0

Doh!それは感謝しました! – frostedpops

答えて

0
はにあなたをonSubmitを変更

通常の動作と同じようにリロードします。

+0

ありがとうございました! – frostedpops

+0

@ManseUK 'callApi'メソッドの最後に' return false; 'を追加するには、' onsubmit'属性を 'return callApi();'に変更する必要があります。 –

+0

@RobW oops ...うん、それを忘れてしまった...タ – ManseUK