jquery+ajax+asp.net 页面无刷新效果

最新推荐文章于 2024-05-03 21:52:12 发布

czhhlove

最新推荐文章于 2024-05-03 21:52:12 发布

阅读量896

点赞数 1

分类专栏： Asp.Net 文章标签： jquery asp.net ajax textbox class list

本文链接：https://blog.csdn.net/czhhlove/article/details/6691776

版权

Asp.Net 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

创建aspx页面 default.aspx 首先引入js方法和css样式然后插入如下代码

<div id="KeyWordTab" style="height: 500px;">
                <div title="添加关键字" style="padding: 5px;">
                    <table cellpadding="0" cellspacing="0" border="0" class="list_box">
                        <tr>
                            <td class="list_item" align="right" style="width: 150px;">
                            </td>
                            <td class="list_item_last">
                            </td>
                        </tr>
                        <tr>
                            <td class="list_item" align="right">
                                关键字
                            </td>
                            <td class="list_item_last">
                                <asp:TextBox ID="txtAddName" runat="server" CssClass="editbox easyui-validatebox"
                                    Width="250px" required="true"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="list_item" align="right">
                                排序号
                            </td>
                            <td class="list_item_last">
                                <asp:TextBox ID="txtAddSort" runat="server" CssClass="editbox easyui-numberbox" Width="250px"
                                    required="true" precision="0" min="1" max="10000" invalidMessage="请输入数字"></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                    <div style="text-align: left; padding-left: 150px; padding-top: 10px;">
                        <input type="button" id="btnSave" value="保存" οnclick="fSaveKey();" />
                    </div>
                </div>
             </div>

然后再写生成easyui Tabs插件

$("#KeyWordTab").tabs()

jquery 页面无刷新的主要代码：

//保存关键字
        function fSaveKey() {
            if (CheckInput) {
                var keyWord = $("#txtAddName").val();
                var keySort = $("#txtAddSort").val();
                $.ajax({
                    async: false,
                    data: "HandleType=AddKeyWord&keyword=" + keyWord + "&keysort=" + keySort + "&rand=" + newCommon.atrand(10000000),
                    url: "Maintenance.ashx",
                    success: function (msg) {
                        if (msg == "-1") {
                            $.messager.alert("系统提示", "关键字或排序号已存在,请检查");
                        }
                        else {
                             $.messager.alert("系统提示", "关键字添加成功"); }
                    }
                });
            }
        }

数据处理页面及添加方法就不写了