Ajax &一般处理程序做异步刷新（增删改查）

最新推荐文章于 2022-03-27 19:21:39 发布

VIP文章 L＆wy

最新推荐文章于 2022-03-27 19:21:39 发布

阅读量432

点赞数

本文链接：https://blog.csdn.net/weixin_44719554/article/details/105406660

版权

Ajax &一般处理程序做异步刷新（增删改查）

下面我将把本次例子给大家分享大家如有疑问请评论
**项目结构
在这里插入图片描述

在这里插入图片描述

index.html 页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>   
        tr, td {
   
            border: solid red;
        }
        img {
   
            width:50px;
            height:50px;
        }
    </style>
    <script>
        //创建Ajax
        var xmlRequest;
        function create() {
   
            xmlRequest = new XMLHttpRequest();
        }
        //判断状态触发事件(查询方法)
        function readyRequest() {
   
            //响应数据的状态
            if (xmlRequest.readyState == 4) {
   
                //200状态码，表示成功应答
                if (xmlRequest.status == 200) {
   
                    var req = xmlRequest.responseText;
                    var re = req.split('&');
                    
                    document.getElementById("show").innerHTML = re[0];
                    document.getElementById("TopKuang").innerHTML = re[1];
                }
            }
        }
        //发送请求（查询方法）
        function sendRequest() {
   
            create();
            xmlRequest.onreadystatechange = readyRequest;
            xmlRequest.open("GET", "Handler1.ashx?Cz=Select", true)
            xmlRequest.send(null);
        }
        /
        /
        /
        //判断状态触发事件(添加方法)
        function readyRequestAdd() {
   
            if (xmlRequest.readyState == 4) {
   
                if (xmlRequest.status == 200) {
   
                    //接受服务器响应回来的结果
                    var result = xmlRequest.responseText;
                    //判断是否添加成功
                    if (result == "AddSucceed") {
   
                        alert("添加成功");
                        //重新赋值
                        sendRequest();
                    }
                }
            }
        }
        //发送请求（添加方法）
        function AddsendRequest() {
   
            var name = document.getElementById("name").value
            var jiage = document.getElementById("jiage").value
            var typeid = document.getElementById("TopKuang").value;
            create();
            xmlRequest.onreadystatechange = readyRequestAdd;
            xmlRequest.open("POST", "Handler1.ashx?Cz=Add", true)
            //添加请求头
            xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
            //传参
            xmlRequest.send("name=" + name + "&jiage=" + jiage + "&typeid=" + typeid);
        }
        ///
        /
        ///
        判断状态触发事件(删除方法)
        function DEletereadyRequest() {
   
            //响应数据的状态
            if (xmlRequest.readyState == 4) {
   
                //200状态码，表示成功应答
                if (xmlRequest.status =

最低0.47元/天解锁文章

L＆wy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ajax &一般处理程序做异步刷新（增删改查）

Ajax &一般处理程序做异步刷新（增删改查）下面我将把本次例子给大家分享大家如有疑问请评论index.html 页面<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style&...
复制链接

扫一扫