JQuery Ajax 获取数据

前台页面：对一张进行查询，删除，添加

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="jquery.js"></script>

</head>

<body>

    <span id="s1"></span>

    <input type="button" id="gget" value="获取" />

    <div id="tb"></div>

</body>

</html>

<script>

   //获取表

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

        //把id为tb的Html清除

        $("#tb").html("");

        $("#s1").append('<img src="img/Loading2.gif" />');

        //get方式传值

        $.get("table.ashx", function (data) {

            $("#s1").html("");

            //把获取的字符串添加到tb中

                var dv = "<div>" + data + "</div>";

                $("#tb").append(dv);

            });

    });

    //删除脚本

    function dd(id) {

        $("#tb").html("");

        $("#s1").append('<img src="img/Loading2.gif" />');

        //把你要删除的ID传过去做删除

        $.get("table.ashx", { "id": id }, function (data) {

               $("#s1").html("");

                var dv = "<div>" + data + "</div>";

                $("#tb").append(dv);

          });

        };

     //添加脚本

    function ff() {

        //如果按钮为添加

        if ($("#in").val() == "添加") {

            //判断账号不为空

            if ($("#name").val().trim()== "") {

                alert("账号不能为空");

                return;

            }

            else {

                //判断密码不为空

                if ($("#pwd").val().trim() == "") {

                    alert("密码不能为空");

                    return;

                }

                    //密码账号不为空就做添加

                else {

                    var name = $("#name").val();

                    var pwd = $("#pwd").val();

                    var sex = $("#sex").attr("checked");  //获取性别

                    var admiID = $("#Admin").val();

                    $.get("table.ashx", { "name": name, "pwd": pwd, "sex": sex, "adminID": admiID }, function (data) {

                        $("#tb").html("");

                        var dv = "<div>" + data + "</div>";

                        $("#tb").append(dv);

                    });

                }

            }

        }

        //如果按钮为编辑

        if ($("#in").val() == "编辑") {

            //把按钮改为添加

            $("#in").val("添加");

            //激活控件

            $("#name,#pwd,#sex,#Admin").removeAttr("disabled");

        }

    }

</script>

后台页面：一般处理程序

<%@ WebHandler Language="C#" Class="table" %>

using System;

using System.Web;

using DAL;

using System.Data;

using System.Data.SqlClient;

public class table : IHttpHandler {

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/plain";

        //如果ID不为空就是做删除

        if (context.Request.QueryString["id"]!=null)

        {

            int id = int.Parse(context.Request.QueryString["id"].ToString());

            int r = SQLHelper.ExecuteNonQuery("delete Users where ID=@0", CommandType.Text, id);

            if (r>)

            {

                Common(context);

            }

        }

        else

        {

            //如果name不为空就做添加

            if (context.Request.QueryString["name"]!=null)

            {

                string name = context.Request.QueryString["name"].ToString();

                string pwd = context.Request.QueryString["pwd"].ToString();

                bool sex = bool.Parse(context.Request.QueryString["sex"].ToString());

                int adminID = int.Parse(context.Request.QueryString["adminID"].ToString());

                int i = SQLHelper.ExecuteNonQuery("insert into Users values(@0,@1,@2,@3)", CommandType.Text, name, pwd,adminID,sex );

                if (i>)

                {

                    Common(context);

                }

            }

                //都为空就是获取表

            else

            {

                Common(context);

            }

        }

    }

    public void Common(HttpContext context)

    {

        SqlDataReader dr = SQLHelper.ExecuteReader("select * from Users", CommandType.Text);

        string newTable = "<table cellspacing='1' cellpadding='3' id='GridView1' style='background-color:White;border-color:White;border-width:2px;border-style:Ridge;'><tr style='color:#E7E7FF;background-color:#4A3C8C;font-weight:bold;'><th scope='col'>ID</th><th scope='col'>UserName</th><th scope='col'>Password</th><th scope='col'>Sex</th><th scope='col'>AdminID</th><th scope='col'>删除</th></tr>";

        //加载  数据行的字符串
　　　　 while (dr.Read())

       　　 {

          　　  string sex = "checked='checked'";

            　　if (dr[].ToString().ToLower() == "false")

                sex = "";

            　　newTable += "<tr style='color:Black;background-color:#DEDFDE;'><td>" + dr[] + "</td><td>" + dr[] + "</td><td>" + dr[] + "</td><td><span class='aspNetDisabled'><input  type='checkbox'" + sex + " disabled='disabled'  /></span></td><td>" + dr[] + "</td>" +

               　　 "<td><input type='button'   onclick='javascript:dd(" + dr[] + ")' value='删除' /></td></tr>";

            //<a href='javascript:__doPostBack('GridView1','Delete$0')' style='color:Black;'></a>

        　　}

        dr.Close();
          //加载 添加行的字符串

        newTable += "<tr style='color:Black;background-color:#DEDFDE;'><td></td><td> <input type='text' id='name'"+

            " disabled='disabled' /></td><td><input type='password' id='pwd' disabled='disabled' /></td><td><span "+

            " class='aspNetDisabled'><input  type='checkbox' id='sex' disabled='disabled' /></span></td><td>"+

            " <select id='Admin' disabled='disabled' >" +

        "<option  value='1'>Admin</option>"+

       " <option  value='2'>Guest</option>"+

        "<option selected value='3'>User</option>" +

        "</select></td>" + "<td><input type='button' id='in'  onclick='javascript:ff()' value='编辑' /></td></tr>";

        newTable += "</table>";
      //一张完整的表的字符串

        context.Response.Write(newTable);

    }

    public bool IsReusable {

        get {

            return false;

        }

    }

}

JQuery Ajax 获取数据的更多相关文章

jquery通过ajax获取数据，控制显示的数据条数
效果图: 现在我们可以先看它的json数据,如图所示: 然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...
jquery.ajax和Ajax 获取数据
前几天接触了jquery 看到里面ajax的部分,自己也不是很懂,然后有重复看了即便,然后写了一个小功能,分享下...我刚学的.有错误的请指教. 验证用户名是否存在在checkname_jqajax ...
jquery ajax获取后台数据后无法输出
今天做ajax获取数据,再浏览器的debugger窗口也看到了数据 ajax代码 $('#userSearch').click(function(){ $.get("loadAllUsers ...
vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...
select2 AJAX获取数据
页面效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...
jquery ajax提交数据给后端
大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...
node.js之用ajax获取数据和ejs获取数据
摘要:学了node之后有时候分不清前台和后台,今天用ajax和ejs来从后台获取数据,没有数据库,用json数据来进行模拟数据库:来区分前台和后台需要干什么? 一.用ejs获取数据 1.文件目录 2. ...
vue ajax获取数据的时候，如何保证传递参数的安全或者说如何保护api的安全
https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全点击提交,发送请求.但是api ...
获取链接的参数，判断是否是微信打开，ajax获取数据
//获取链接参数function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + " ...

随机推荐

wex5添加视频播放
我使用的播放器是ckplayer http://www.ckplayer.com/ ckplayer存放路,项目路径下: 方法一: 在monitor.w里加一个div标签 <div id=&qu ...
布局神器：Flexbox
最近的工作内容大多是移动端网页的开发,百分比布局,Media Queries,Bootstrap等常规的响应式/自适应的开发技术皆一一试过,但觉以上都不够灵活,所以,一直再尝试寻求更加灵活的精确的移动 ...
LINUX进程上锁查看方法
jps -l 获取进程列表 jstack -l 8672 查看详细信息查找启动任务的class 查看状态
网站发布在另外一个网站下面配置伪静态之后图片样式和JS丢失
<script src="<%=ResolveClientUrl("~/content/js/jquery-1.7.1.min.js") %>" ...
HashMap陷入死循环的例子
//使用这个例子可以模拟HashMap陷入死循环的效果,可能需要执行多次才会出现. 1 package com.hanzi; import java.util.HashMap; public clas ...
unison实时双向数据同步
软件下载 ocamlopt下载地址:http://caml.inria.fr Unison下载地址:http://www.seas.upenn.edu/~bcpierce/unison 1.安装uni ...
web-打印
项目前景由于之前的打印是客户端程序,也就是winform做的,现在需要改版成网页版,其他功能都能够很好的实现,就是在打印上遇到一些难点.由于第一次做打印功能,刚开始照搬winform中调用word文 ...
js 计算两个日期之间的周数
//返回两个日期相差的周数 function WeeksBetw(date1, date2) { //这里的date1,date2都是Date对象 var d1 = new Date(date1); ...
javascript判断键盘按键
window.document.onkeydown = disableRefresh; function disableRefresh(evt){ evt = (evt) ? evt : window ...
如何在WebSocket类中访问Session
我最近正在做一个基于websocket的webQQ,最后代码会开源带github上,所以过程中我就不贴所有的代码啦~就贴问题的关键. 我在WebSocket里发消息的时候需要用到session,因为在 ...

JQuery Ajax 获取数据

JQuery Ajax 获取数据的更多相关文章

随机推荐

热门专题