Question

我正在尝试使用Servlet中的JSON Array在jsp上创建一个表。我的问题是我需要按两次按钮才能获得输出。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Search a User</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#search1').click(function ()
            {
                var searchdata = $("#searchword").val();
                $.ajax({
                    type: "GET",
                    url: "Search", //this is my servlet
                    data: {searchword :searchdata },
                    success: function(data){
                        var out = "<table>";

                        for(i = 0; i < data.length; i++) {
                            out += "<tr><td>" + data[i].fname + "</td><td>" +data[i].lname +"</td><td>" + data[i].dob + "</td><td>" + data[i].country +"</td><td>" + data[i].email + "</td><td>" +data[i].mnumber +"</td></tr>";
                        }
                        out += "</table>";
                        document.getElementById("id01").innerHTML = out;
                    }
                });
            });

        });
    </script>
</head>
<body>
<form method="post" class="form-horizontal">
    <fieldset>


        <div class="form-group">
            <label class="col-md-4 control-label" for="searchword">Search a User</label>
            <div class="col-md-5">
                <input id="searchword" type="text" placeholder="Add User's name" class="form-control input-md" required="">

            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label" for=""></label>
            <div class="col-md-3">
                <button id="search1" class="btn btn-block btn-success">Search</button>
            </div>
        </div>

    </fieldset>
</form>
<div id="id01"></div>
</body>
</html>

要创建预期输出，我需要在搜索按钮上单击两次。正确检索JSON数组但Jquery函数不响应单击。

Answer 1

似乎在第一次点击后运行，所以也许你的页面上某处有相互冲突的代码？

https://jsfiddle.net/716tnfk3/

$('#search1').click(function() { }

或者，您在移动设备上进行测试吗？

Answer 2

正如yezzz所说，我的代码中存在代码冲突。我删除了所有的cdn并从w3schools使用添加了cdn。现在它工作正常。之所以发生这种情况，是因为我将几个提到的代码的教

$（）。点击需要按两次。 Jquery JSP

2 个答案: