zoukankan      html  css  js  c++  java
  • 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="../Content/jquery-3.1.1.js"></script>

        <!--上传图片-->
        <script src="../Content/jquery.fileupload.js"></script>

        <!--日期-->
        <script src="../Content/My97DatePicker/WdatePicker.js"></script>
        <script src="../Content/My97DatePicker/lang/en.js"></script>

        <!--富文本-->
        <script src="../Content/ueditor/ueditor.config.js"></script>
        <script src="../Content/ueditor/ueditor.all.js"></script>
        <script src="../Content/ueditor/lang/zh-cn/zh-cn.js"></script>

        <link href="../Content/bootstrap.css" rel="stylesheet" />

    </head>
    <body>
        <div style="border:1px solid;90%;height:670px">
            <table>
                <tr>
                    <td>姓名</td>
                    <td><input id="txtName" type="text" /></td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td><input id="txtAge" type="text" /></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input id="Radio1" type="radio" name="sex" checked />男
                        <input id="Radio2" type="radio" name="sex" />女
                    </td>
                </tr>
                <tr>
                    <td>爱好</td>
                    <td>
                        <input id="Checkbox1" type="checkbox" name="hobby" value="喊麦" />喊麦
                        <input id="Checkbox1" type="checkbox" name="hobby" value="跳冰箱" />跳冰箱
                        <input id="Checkbox1" type="checkbox" name="hobby" value="直播" />直播
                        <input id="Checkbox1" type="checkbox" name="hobby" value="跳钢管舞" />跳舞
                    </td>
                </tr>
                <tr>
                    <td>头像</td>
                    <td><img id="img1" style="50px;height:50px;display:inline" src="" alt="" /><input id="File1" type="file" /></td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td><input id="txtDate" type="text" onclick="WdatePicker()" /></td>
                </tr>
                <tr>
                    <td>简介</td>
                    <td><textarea id="txtRemark" style="800px;height:250px" rows="2" cols="20"></textarea></td>
                </tr>
                <tr>
                    <td>直播平台</td>
                    <td>
                        <select id="Select1">
                            <option value="0">请选择</option>
                        </select>
                    </td>
                </tr>
               
                <tr>
                    <td></td>
                    <td><input id="btnSave" type="button" value="提交" class="btn-primary" /></td>
                </tr>
            </table>
        </div>
    </body>
    </html>
    <script>
        var ue = UE.getEditor("txtRemark");
        //绑定下拉列表
        $.ajax({
            url: "../Ashx/BandSelect.ashx",
            dataType: "json",
            success: function (data) {
                for (var i in data) {
                    var op = '<option value="' + data[i].Id + '">' + data[i].NetTypeName + '</option>';
                    $("#Select1").append(op);
                }
                Fantian();
            }, error: function (data) {
                console.log(data);
            }
        })
        var id = location.search.substring(4);

        //反填数据
        function Fantian() {
            $.ajax({
                url: "../Ashx/SelectNetInfoById.ashx",
                data: { id: id },
                dataType: "json",
                success: function (data) {
                    var o = data[0];
                    $("#txtName").val(o.NetName);
                    $("#txtAge").val(o.NetAge);
                    o.NetSex ? $("#Radio1").prop("checked", true) : $("#Radio2").prop("checked", true);
                   
                    $("[name='hobby']").each(function () {
                        //判断数据库的爱好是否包含每一项
                        if (o.NetHobby.toString().indexOf(this.value)>-1) {
                            this.checked = true;
                        }
                    })
                    $("#img1").attr("src", o.NetImgUrl);
                    $("#txtDate").val(o.NetDate.toString().substring(0,10));
                    //富文本监听事件
                    ue.addListener("ready", function () {
                        ue.setContent(decodeURI( o.NetRemark2));
                    })
                    
                    $("#Select1 option").each(function () {
                        if (o.TypeId.toString() == this.value) {
                            this.selected = true;
                        }
                    })
                    
                }, error: function (data) {
                    console.log(data);
                }

            })
        }


        //提交
        $("#btnSave").click(function () {
            if ($("#File1")[0].files[0] == null) {
                SavaData();
            }
            else {
                UploadImg();
            }
        })



        //上传图片
        function UploadImg() {
            var formData = new FormData();
            formData.append("file", $("#File1")[0].files[0]);

            if ($("#File1")[0].files[0] == null) {
                alert("请您选择图片!");
                return;
            }
            $.ajax({
                url: "../Ashx/UploadImg.ashx",
                type: 'POST',
                data: formData,
                // 告诉jQuery不要去处理发送的数据
                processData: false,
                // 告诉equerry不要去设置Content-Type请求头
                contentType: false,
                beforeSend: function () {//发送之前
                    console.log("正在进行,请稍候");
                },
                success: function (data) {
                    if (data == 1) {
                        SavaData();     //保存数据
                    } else {
                        console.log("上传失败");
                    }
                },
                error: function (responseStr) {
                    console.log("error");
                }
            });
        }
        //保存数据.
        function SavaData() {
            var strHobby = [];
            $("[name='hobby']:checked").each(function () {
                strHobby.push(this.value);
            })
            var url="";//图片路径
            if ($("#File1")[0].files[0] == null) {//如果图片名称为空
                url = $("#img1").attr("src");//用原来的图片
            }
            else {
                url = "../img/" + $("#File1")[0].files[0].name;
            }
            var o = {
                id:location.search.substring(4),//一定要传id
                NetName: $("#txtName").val(),
                NetAge: $("#txtAge").val(),
                NetSex: ($("#Radio1").prop("checked") ? 1 : 0),
                NetHobby: strHobby.toString(),
                NetImgUrl:url ,
                NetDate: $("#txtDate").val(),
                NetRemark: ue.getContentTxt(),
                NetRemark2: encodeURI(ue.getContent()),
                TypeId: $("#Select1").val()
            }

            $.ajax({
                url: "../Ashx/UptNetInfo.ashx",
                data: { o: JSON.stringify(o) },
                type: "post",
                dataType: "text",
                success: function (data) {
                    if (data == 1) {
                        alert("修改成功!");
                        location.href = "ShowNetInfo.html";
                    } else {
                        alert("修改失败!")
                    }
                }


            })
        }

      function Edit(id) {
            $.ajax({
                url: "/ProductInfos/Edits/" + id,
                type: "get",
                dataType:"json",
                success: function (data) {
                    //data = JSON.stringify(data);
                    //data = JSON.parse(data);
                    
                    $("#ProductName").val(data.ProductName);
                    $("#ProductNum").val(data.ProductNum);
                    $("#ProductPrice").val(data.ProductPrice);
                    $("#ProductCount").val(data.ProductCount);

                    $("[name='ProductBrand']").each
                    
                }
            })
        }
       
    </script>

  • 相关阅读:
    Redis面试题 总结
    C++ 自由存储区是否等价于堆?(转)
    线程同步方式
    epoll的原理 (一)(转)
    C/C++ 中 volatile 关键字详解(转)
    Linux堆内存管理
    找出数组中出现次数超过一半的数
    剑指offer-复杂链表的复制
    已知二叉树前序中序遍历重建二叉树
    Linux常用命令
  • 原文地址:https://www.cnblogs.com/Kirins/p/10294377.html
Copyright © 2011-2022 走看看