Question

我在一个包含JQuery和Kendo UI的页面上工作。这是我的第一个JQuery项目，我把事情做好了。但是，我的页面由于某种原因刷新。这就是我想要做的：我有一个文本字段，我可以在其中输入搜索词，当我按下一个按钮时，查询将被发送到一个php文件，并会弹出一些json信息。到目前为止，我可以让它返回一些东西，但页面刷新并且所有数据都消失了。

代码：

*<!DOCTYPE html>
<html>
<head>
    <title>Search</title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>
</head>
<body>
<div id="example">
    <form id="search">
        <label for="search">Search For:</label>
        <input type="text" id="txtSearch" name="q">
        <button type="submit" id="submit">Find</button>
    </form>
    <div id="grid">
    </div>
</div>    
    <script>
        $(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: "include/showsearch.php"
                    },
                    schema: {
                        data: "data"
                    }
                },
                columns: [{field: "id"},{field: "name"},{field: "season"}]
            });

            $("#submit").click(function(){
                var textVal = $("#txtSearch").val();
                var dynamicURL = "include/showsearch.php?show_name=" + textVal; 
                var grid = $("#grid").data("kendoGrid");
                alert("sdf123");
                grid.dataSource.transport.options.read.url = dynamicURL;
                grid.dataSource.read();
                alert("sdf");
            });         
        });
    </script>

</body>
</html>*

注意：我使用警报功能来停止并查看页面的反应。如何刷新页面？

Answer 1

发生这种情况的原因是提交按钮的默认操作仍在发生;提交表格。

最好抓住表单提交事件而不是单击按钮，因为在文本字段中点击 Enter 也可以提交表单。

您还需要阻止默认事件操作。

更改此

$("#submit").click(function(){

到这个

$('#search').on('submit', function(e) {
    e.preventDefault();
    // and the rest of your code here

JQuery页面刷新

1 个答案: