时间戳

首页 > 解决方案 > 使用回车键单击按钮的 jQuery 调用方法

jquery - 使用回车键单击按钮的 jQuery 调用方法

问题描述

我的 jQuery 脚本是一个 AJAX，当单击搜索按钮时，它会加载从 servlet 检索到的数据。我试图链接回车键，以便它也可以搜索：

$(document).ready(function(){
            $('#search_button').click(function loadDoc(){
                var search_value = $('#terms').val().trim();
                $.ajax({
                    url: "SearchTermsServlet",
                    data: {
                        terms: search_value
                    },
                    type:"POST",
                    dataType: "html",
                    success: function (data){
                        $('#outershell').html(data);
                    }
                });
            });
            $(document).keypress(function(event){
                if(event.which==13){
                    $('#search_button').click();
                }
            });
        });

通过输入键检索数据的功能有效，但它不会重新加载页面，这意味着“成功：函数（数据）{...}”部分未被调用。我该如何解决？

(search_button = id of input of type button)
(SearchTermsServlet = Name of servlet)
(terms = Name of input of type text)
(outershell = div where new information is loaded)

terms.html 的 HTML 代码

    <!DOCTYPE html>
<html>
<head>
    <title>Terms: Chemistry Database</title>
    <link rel="stylesheet" type="text/css" href="termsformat.css">
    <script src="jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#search_button').click(function loadDoc(){
                var search_value = $('#terms').val().trim();
                $.ajax({
                    url: "SearchTermsServlet",
                    data: {
                        terms: search_value
                    },
                    type:"POST",
                    dataType: "html",
                    success: function (data){
                        $('#outershell').html(data);
                    }
                });
            });
            $(document).keypress(function(event){
                if(event.which==13){
                    $('#search_button').click();
                }
            });
        });
    </script>
</head>
<body>
    <div>
        <h2> Chemistry Database: Terms Edition</h2>
    </div>
    <div>
        <form name="termform">
            <a class="active" href="chem.html">Home</a>
            <input type="text" id="terms" name = "terms" placeholder="&nbsp;Term..."/>
            <input type="button" id="search_button" value="Search">
        </form>
    </div>
    <div id="outershell">
    </div>   
    <div style="position: relative; background-color: #0f0f0f; height: 500px;width:100%">    
        <div id="footer">
             Creator: Ethan Y.[Ie Yusen] &nbsp;&nbsp;&nbsp;Contact: ethan202y@gmail.com
        </div>
    </div>
</body>
</html>

标签： jqueryajax

解决方案

我会更改您的事件侦听器以告诉<form>标签侦听submit事件，然后获取数据。这将包括点击搜索按钮以及点击回车键。您还需要在事件侦听器中使用preventDefault。

所以你的代码会变成：

$('form[name="termform"]').submit(function loadDoc(event){
  event.preventDefault(); // So the form won't submit
  // The rest of your existing code goes here
});

推荐阅读