博客

Ajax实例

  • Post author:
  • Post category:其他


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WebApplication1.Index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jq2.1/jquery-2.1.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //按钮指定时间
            $("#demo").click(function () {
                //发送Aajx请求,请求Server页面,弹出数据
                $.ajax({
                    type: "GET",
                    url: "IndexServer.aspx",
                    success: function (d) {
                        alert(d);
                    },
                    error: function (aj) { 
                    alert("请求出错:代号"+aj.status)
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" value="ajax Demo" id="demo" />
    
    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StudentMS.aspx.cs" Inherits="WebApplication1.StudentMS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jq2.1/jquery-2.1.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        function goPage(i) {//用Ajax请求第i页的数据  action=list&pageIndex=1
            $.post("StuServer.aspx", {action:"list",pageIndex:i}, function (t) {//后台数据
                $("#list").html(t);
                
            });
        }
        $(function () {
            goPage(1);//页面加载请求第一页
        });
        function delData(id) { // 删除
            $.post("stuServer.aspx", { action: "delData", id: id }, function (d) {//数据库id前台id
                goPage(1);
            });
        }
        function editData(id) { //编辑操作

        }
        function insert() { //新增操作

            var stuName = $("#name").val();
            var stuNo = $("#no").val();
            var sex = $("#sex").val();
          
            $.post("stuServer.aspx", { action: "add", stuName: stuName, stuNo: stuNo, sex: sex }, function (s) {
                if (s > 0) {
                    goPage(1);
                    alert("新增成功");
                }
            });
        }
       

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="list"></div>
      姓名:<input type="text" id="name" />
        <br />
     学号:<input type="text" id="no" /><br />
     性别:<input type="text" id="sex" /><br />
     备注:<input type="text" id="remark" />
        <br />
       <input type="button" value="新增" onclick="insert()" />
       <input type="button" value="提交"  />
        <br />
        <br />

    
    </form>
</body>
</html>

转载于:https://www.cnblogs.com/xiaz/p/5243159.html