2016-04-04 29 views
0

私は、次のしている:Javascriptの応答とAjaxリクエスト

function wikiAjax (searchURL) { 
    return Promise.resolve($.ajax({ 
     url: searchURL, 
     jsonp: "callback", 
     dataType: 'jsonp', 
     xhrFields: { 
      withCredentials: true 
     }, 
    })); 
} 

$(".search-form").submit(function() { 
    var searchText = $('#search').val(); 
    var searchURL = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrsearch=" + searchText + "&gsrlimit=15&prop=extracts&exsentences=3&exintro=&explaintext&exlimit=max&callback=JSON_CALLBACK"; 
    console.log(searchURL); 
    var wikiResponse = wikiAjax(searchURL); 
    wikiResponse.then(function(data) { 
     alert(data); 
    }, function() { 
     alert("The call has been rejected"); 
    }); 
}); 

しかし、私はどこか(例えばwikiResponse.then行で)ブレークポイントを置く場合にのみ、答えを得ます。

呼び出しが結果を返す前にコードが実行されたようですが、なぜですか?約束は適切に設定されていませんか?

事前に感謝します。

+1

コールが返される前にコードが実行されると思いますか? –

+0

@ JesseLee私はブレークポイントを置くので、私は警告のオブジェクトを見ることができるので。 – S4rg0n

答えて

0

ここでPromise.resolveを実行する必要はありません。$ .ajax呼び出しがすでに約束を返すためです。 これを試してみてください:

function wikiAjax (searchURL) { 
    return $.ajax({ 
     url: searchURL, 
     jsonp: "callback", 
     dataType: 'jsonp', 
     xhrFields: { 
      withCredentials: true 
     } 
    }); 
} 

$(".search-form").submit(function() { 
    var searchText = $('#search').val(); 
    var searchURL = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrsearch=" + searchText + "&gsrlimit=15&prop=extracts&exsentences=3&exintro=&explaintext&exlimit=max&callback=JSON_CALLBACK"; 
    console.log(searchURL); 
    var wikiResponse = wikiAjax(searchURL); 
    wikiResponse.done(function(data) { 
     alert(data); 
    }).fail(function(err) { 
     alert("The call has been rejected"); 
    }); 
}); 

これはplunker作業である(と表示するように変更された):私はPromise.resolveを(と思うhttps://plnkr.co/edit/qyc4Tu1waQO6EspomMYL?p=preview

+0

@pkeuterに感謝しますが、あなたのソリューションでは、ブレークポイントを使っても機能しません。 – S4rg0n

+0

@ S4rg0nあなたはplnkrを見ましたか?それは確かに動作するので、あなたは別の何か別のことをしている必要があります。上記のように、あなたは最近のバージョンのjQueryを使用していますか? –

0

)あなたは明示的にそれが必要それをサポートすることを確認しない限りES6機能がありますうまくいかない。

しかし、あなたのための$アヤックス(ラッキー)次の形式での約束を返す:(あなたのコードで書かれたようにしていない(当時付き)とキャッチ())

var promise = $.ajax({ 
    url: "/myServerScript" 
}); 

promise.done(mySuccessFunction); 
promise.fail(myErrorFunction); 

+0

@chenopありがとうございますが、まったく同じように動作します – S4rg0n

+0

どのJQueryバージョンを使用していますか? – chenop

+0

私は2,2,2を持っています。 Jesse Leeのソリューションがうまくいきました。問題はフォームに送信されました:-)ありがとう! – S4rg0n

4

私はここで起こっているのは、ブラウザがajax呼び出しに加えて、フォーム上のデフォルトのsubmitイベントを実行しているということです。その結果、ウィンドウがアンロードされて再ロードされます。

は入れてみてください:ハンドラ内

event.preventDefault(); 

$(".search-form").submit(function(event) { 
    event.preventDefault(); 
    var searchText = $('#search').val(); 
    var searchURL = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrsearch=" + searchText + "&gsrlimit=15&prop=extracts&exsentences=3&exintro=&explaintext&exlimit=max&callback=JSON_CALLBACK"; 
    console.log(searchURL); 
    var wikiResponse = wikiAjax(searchURL); 
    wikiResponse.then(function(data) { 
     alert(data); 
    }, 
    function() { 
     alert("The call has been rejected"); 
    } 
); 
}); 
+0

偉大な@Jesseリー!!!できます!!説明していただけますか? – S4rg0n

+1

したがって、送信ボタンを含むフォームを作成すると、デフォルトでブラウザはそのフォームの「アクション」にナビゲートしてその送信イベントを処理します。恐らく、

要素の属性としてアクションが提供されていないため、ブラウザは現在のURLをフォームアクションとして使用します。結果は本質的にページリフレッシュになります。あなたのajax呼び出しが返される前にページがリフレッシュされていたので、基本的にキャンセルされました。 e.preventDefault()でブラウザのデフォルトのハンドラを妨げることにより、ブラウザがページを更新しなくなります。 –

+0

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