为什么jquery没有提交正常工作?

时间:2016-03-24 08:10:32

标签: javascript jquery html

此代码在当前状态下工作正常,即我在按钮上使用click事件。但是如果我在我的html代码中使用输入标签周围的表单标签并使用jquery的提交方法,它不会给出任何结果。为什么会这样?我必须使用表单元素,因为我希望能够使用单击按钮的输入键进行搜索

HTML:

  <body>
  Title: <input type="text" id="title"><br/>
  <input type="submit" value="Submit" id="btn">
  <p id="results"></p>
  <body>

jQuery的:

 $(document).ready(function(){

  $("#btn").on("click", function(){
   var textval = $('#title').val();
   var playListURL = 'https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=' + textval + '&format=json&callback=?';
   $.ajax({
    type: "GET",
    url: playListURL,
    contentType: "application/json; charset=utf-8",
    async: false,
    dataType: "json",
    success: function (data, textStatus, jqXHR) {
        for (var i = 0; i < 10; i++)
        {
           var url = "https://en.wikipedia.org/wiki/" + data.query.search[i].title;
           $("#results").append("<b> <a href='" + url + "' > " + data.query.search[i].title + "</a></b></br> ");
         //console.log(url);
        } 
    },
    error: function (errorMessage) {
    }
   });
   //alert($('#title').val());
  });
 });

1 个答案:

答案 0 :(得分:0)

尝试更改此行

$("#btn").on("click", function(){

到此:

$("#btn").on("click", function(e){
   e.preventDefault();

然后表单不会在点击

时提交默认方式