0

我在一个带有一些 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>*

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

4

1 回答 1

0

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

最好捕获表单提交事件，而不是单击按钮，因为在文本字段中按Enter也可能提交表单。

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

改变这个

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

对此

$('#search').on('submit', function(e) {
    e.preventDefault();
    // and the rest of your code here
于 2013-10-15T01:03:40.013 回答