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;width: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="width: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="width: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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步