|
|
楼主 |
发表于 2024-12-18 17:07:42
|
显示全部楼层
将以下代码用ajax方法传参
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
label,
input {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 350px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td,
div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script>
$(function() {
var dialog, form, name, email, password, th
tips = $(".validateTips");
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function addUser() {
var valid = true;
if (valid) {
$("#users tbody").append("<tr>" +
"<td>" + $("#name").val() + "</td>" +
"<td>" + $("#email").val() + "</td>" +
"<td>" + $("#password").val() + "</td>" +
"<td>" +
"<button class='edit'>修改</button>" +
"<button class='del'>删除</button>" +
"</td>" +
"</tr>");
dialog.dialog("close");
}
return valid;
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"添加": addUser,
取消: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
//allFields.removeClass( "ui-state-error" );
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addUser();
});
$("#create-user").click(function() {
dialog.dialog("open");
});
/*仿照添加新用户完成修改功能*/
//1、单击修改按钮弹出对话框
$('body').on("click", '.edit', function() {
//获取修改按钮左侧的姓名、邮箱等
th = $(this).parent().prevAll();
name = th.eq(2).text();
email = th.eq(1).text();
password = th.eq(0).text();
//将获取到的三个值分别赋值给 "#dialog-form1"
$('#name1').val(name);
$('#email1').val(email);
$('#password1').val(password);
dialog1.dialog("open");
});
//2、利用jQuery-ui 框架让表单弹出
dialog1 = $("#dialog-form1").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"确认": edit,
取消: function() {
dialog1.dialog("close");
}
},
close: function() {
form1[0].reset();
//allFields.removeClass( "ui-state-error" );
}
});
form1 = dialog1.find("form").on("submit", function(event) {
event.preventDefault();
edit();
});
function edit() {
name = $('#name1').val();
email = $('#email1').val();
password = $('#password1').val();
th.eq(2).text(name);
th.eq(1).text(email);
th.eq(0).text(password);
dialog1.dialog("close");
}
//删除
$('body').on("click", '.del', function() {
th = $(this).parent().parent('tr');
dialog2.dialog("open");
});
//2、利用jQuery-ui 框架让表单弹出
dialog2 = $("#dialog-form2").dialog({
autoOpen: false,
height: 200,
width: 350,
modal: true,
buttons: {
"删除": del,
取消: function() {
dialog2.dialog("close");
}
},
close: function() {
form2[0].reset();
//allFields.removeClass( "ui-state-error" );
}
});
form2 = dialog2.find("form").on("submit", function(event) {
event.preventDefault();
del();
});
function del() {
th.remove()
dialog2.dialog("close");
}
});
</script>
</head>
<body>
<div id="dialog-form" title="添加新用户">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">姓名</label>
<input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all">
<label for="email">邮箱</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
<label for="password">密码</label>
<input type="password" name="password" id="password" value=""
class="text ui-widget-content ui-corner-all">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="dialog-form1" title="修改当前用户">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">姓名</label>
<input type="text" name="name" id="name1" value="" class="text ui-widget-content ui-corner-all">
<label for="email">邮箱</label>
<input type="text" name="email" id="email1" value="" class="text ui-widget-content ui-corner-all">
<label for="password">密码</label>
<input type="password" name="password" id="password1" value=""
class="text ui-widget-content ui-corner-all">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="dialog-form2" title="删除当前用户">
<!-- <p class="validateTips">All form fields are required.</p> -->
<form>
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
<!-- </fieldset> -->
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>姓名</th>
<th>邮箱</th>
<th>密码</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>johndoe1</td>
<td>
<button class='edit'>修改</button>
<button class='del'>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">添加新用户</button>
<script>
$('#bt').click(function() {
$.ajax({
//传参方式
type: 'get',
//前端要访问的服务器地址
url: 'data.json',
//前端要向服务器传的数据
data: {
'username': 'lisi'
},
success: function(data) {
tab = $('<table></table>')
for (var i = 0; i < data.length; i++) {
li = "<tr>" +
"<td>" + data[i].userid + "</td>" +
"<td>" + data[i].username + "</td>" +
"<td>" + data[i].userage + "</td>" +
"</tr>"
tab.append(li);
}
$('body').append(tab);
// console.log(JSON.parse(data))
},
error: function() {
console.log('错误')
}
})
})
</script>
</body>
</html> |
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2024-12-18 16:08:11
置顶卡
千斤顶
显身卡