HTMLがajaxの呼び出しに影響するか

Question

Wikipediaのビューアを作成していましたが、Wikipediaのタイトル検索を実装しました.Ajaxの呼び出しは、&ボタンタグの前後にフォームタグを追加するまでうまくいきました。

<form class="pure-form"> 
    <input type="text" id="txtff" class="pure-input-rounded" placeholder="Search for..."> 
    <button type="submit" class="pure-button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
    </form> 

私のAjaxのコードは次のとおりです。私はcodepenにこのすべてをやっていた

$("button").click(function() { 

    var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=allpages&aplimit=5&apfrom=Albert"; 

    $.ajax({ 
    url: url, 
    jsonp: "callback", 
    dataType: "jsonp", 
    success: function(resp){ 
     console.log(JSON.stringify(resp)); 
    }, 
    error: function(err){ 
     console.log("ERR") 
    } 
    }); 
}); 

：http://codepen.io/theami_mj/pen/KMKPvZ

Answer 1

form提出で問題があったと感じました。submitボタンタイプが追加されました。それはあなたがフォームを取り払う必要があるform

$("button").click(function(e) { 
    e.preventDefault() 
    var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=allpages&aplimit=5&apfrom=Manoj"; 

    $.ajax({ 
    url: url, 
    jsonp: "callback", 
    dataType: "jsonp", 
    success: function(resp) { 
     console.log(JSON.stringify(resp)); 
    }, 
    error: function(err) { 
     console.log("ERR") 
    } 
    }); 
}); 

UPDATED FIDDLE

Answer 2

使用type='button'、type='submit'は、フォームを提出すると、ページがアンロードされます。

$("button").click(function() { 
 
    var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=allpages&aplimit=5&apfrom=Albert"; 
 
    $.ajax({ 
 
    url: url, 
 
    jsonp: "callback", 
 
    dataType: "jsonp", 
 
    success: function(resp) { 
 
     console.log(JSON.stringify(resp)); 
 
    }, 
 
    error: function(err) { 
 
     console.log("ERR") 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form class="pure-form"> 
 
    <input type="text" id="txtff" class="pure-input-rounded" placeholder="Search for..."> 
 
    <button type="button" class="pure-button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>Go! 
 
    </button> 
 
</form>

Answer 3

あなたは、フォームのをonSubmitイベントハンドラにハンドラ/ AJAX呼び出しをクリックし添付してください：

<form class="pure-form" onsubmit="myAjaxCall"> 
    <input type="text" id="txtff" class="pure-input-rounded" placeholder="Search for..."> 
    <button type="submit" class="pure-button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
</form> 

これはあなたのスクリプトになります（ただという関数を作成しmyAjaxCallクリックイベントハンドラをアタッチする代わりに）。

myAjaxCall = function() { 
    var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=allpages&aplimit=5&apfrom=Albert"; 

    $.ajax({ 
    url: url, 
    jsonp: "callback", 
    dataType: "jsonp", 
    success: function(resp){ 
     console.log(JSON.stringify(resp)); 
    }, 
    error: function(err){ 
     console.log("ERR") 
    } 
    }); 
} 

http://www.w3schools.com/jsref/event_onsubmit.asp

Answer 4

これは正常な動作です。ボタンをタイプして送信するとフォームが送信されます。 type = "button"でtype = "submit"を置き換えるようにしてください。

Answer 5

を提出しないようにだけ、submitting the formで、ボタンのデフォルトのアクションを防ぐためにe.preventDefault()すなわち、コードの1行を追加します。 、またはあなたが追加する必要があります

$("form").on("submit", function(e){ 
    e.preventDefault(); 
    return false; 
}); 

あなたのJSコードに、thのデフォルトの動作を防ぐために電子フォーム。

また、あなたがここにあなたのボタンのクリックイベントからすべてのロジックを動かすことができ、あまりにも：

$("form").on("submit", function(e){ 
    e.preventDefault(); 
    // your AJAX call here 
    return false; 
});