问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

为什么index.js的这个请求没有成功，console.log(search)在控制台打印下马上又刷新了，这是什么原因

头像
QAQwow
    270257100
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div>
    <form id="myform">
      <div class="input-field">
        <input type="search" id="books">
        <label for="search">Search books</label>
      </div>
      <button class="btn red">查询</button>
    </form>
  </div>
  <div class="result">

  </div>
  <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/materialize/1.0.0-beta/js/materialize.min.js"></script>
  <script src="index.js"></script>
</body>
</html>

    index.js:

    $(document).ready(function() {
  console.log('jQuery sucessful')
  $("#myform").submit(function() {
    var search = $("#books").val();
    console.log(search);
    if(search === '') {
      alert('Please enter something');
    }else {
      var url = '';
      var img = '';
      var title = '';
      var author = '';

      $.get("https://www.googleapis.com/books/v1/volumes?q=" + search,function(res) {
        console.log(res);
      });
    }
  });

  return false;
});
    javascript前端jquery
    阅读 2.8k
    5 个回答
    得票最新
    头像
    某熊猫桑
      16.1k61547
      ✓ 已被采纳
      1. 首先，一个比较明显的问题，Ls几位都说过了，就是你的return false;语句，是位于.submit()的回调函数以外的，所以没能阻止默认事件的触发，进而导致了页面不正常的跳转；

      2. 在回调里阻止默认事件，通常有两种方式：第一种，就是在回调末尾写上return false;，当然也可以return一个布尔变量，这时就会根据这个布尔变量的值，来决定是不是阻止事件默认行为；第二种，其实Ls也提到过，就是在回调一开始传入事件对象e(当然有时也会是ev、evt、event等，看个人喜好，统一就行)，然后调用.preventDefault()来达到实现阻止事件默认行为的目的，并且这句可以放到回调开始，如写成：

        $("#myform").submit(function(e){
    e.preventDefault();
    // 这里再blablablabla……
}

        用前一种或者后一种都无所谓，主要是让代码的逻辑清晰就好。

      3. 如果你决定只用js来做请求的话，还有一种方法，就是把触发回调的按钮的type改掉，让它变成一个“单纯”的按钮，失去submit的功能，不去触发submit事件，这时使用click事件来监听就行了，而且也不用阻止submit的默认行为。比如可以：

        <form id="myform">
    <div class="input-field">
        <input type="search" id="books">
        <label for="search">Search books</label>
    </div>
    <button type="button" class="btn red">查询</button>
</form>
        $("#myform").children('button').click(function(e){
    $.get("https://www.xxx.com/data?q=" + search)
        .done(function(data) {
            console.log(data);
        });
})
      头像
      wmaker
        2.9k119

        注意这一句：return false; 。
        你是不是想把它放在给 submit 传入函数的后面，用于禁止表单提交？可是现在在外面。
        马上又刷新，是因为表单默认提交到本页面，你可以看到现在的页面相比之前，最后多了个问号。

        解决办法就是把 return false; 移到 submit 传入的方法的最后。

        头像
        布衣小酱
          7822

          页面刷新是因为触发了表单的默认提交事件，在submit事件里面加一句e.preventDefault()就好了

          头像
          seame1on
            38211

            $("#myform").submit()触发了表单默认提交事件。

            $("#myform").submit(function(e){
    e.preventDefault();
    // do sth...
})
            头像
            七月
              6541413
              $("#myform").submit(function() {
    //your code....
    return false;
});
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题